Skip to content

Toggle multiple divs with multiple buttons using animate.css – jQuery

I have three different buttons with three different divs that each toggle an applicable div in same place. Trying to do 2 things.

  1. Add class on .app-icon button when relative .app-div is showing so that I can add background color when active.
  2. Add an animate.css effect when toggling same .app-div open and closed so that when the div disappears it slides down, rather than just abruptly disappearing.


<a href="#" class="app-icon"><i class="fa fa-calculator" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-sun-o" aria-hidden="true"></i></a>
<a href="#" class="app-icon"><i class="fa fa-rss" aria-hidden="true"></i></a>
<div class="app-div">
content div 1
<div class="app-div">
content div 2
<div class="app-div">
content div 3


$('.app-icon').click(function() {
  var index = $(this).index();
//animate.css effect
$('.app-div').addClass('animated fadeInUp');

Here’s what I have so far:


One option is to handle an if statement checking if the icon clicked is actually active like this:

$('.app-icon').click(function() {
  var index = $(this).index();
  if($(this).hasClass('active')) {
  } else {

Updated Demo