frshjb373 frshjb373 - 1 month ago 3x
CSS Question

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
    button when relative
    is showing so that I can add background color when active.

  2. Add an animate.css effect when toggling same
    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