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

Question

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

Add class on .app-icon button when relative .app-div is showing so that I can add background color when active.
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.

HTML:

<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>

<div class="app-div">
content div 2
</div>

<div class="app-div">
content div 3
</div>

jQuery:

$('.app-icon').click(function() {
  var index = $(this).index();
  $('.app-div').eq(index).toggle().siblings('.app-div').hide();
});

//animate.css effect
$('.app-div').addClass('animated fadeInUp');

Here's what I have so far: https://jsfiddle.net/frshjb373/a5osx7y6/3/

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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')) {
     $(this).removeClass('active');
     $('.app-div').eq(index).addClass('fadeOutDown')
  } else {
     $('.app-icon').removeClass('active');
     $(this).addClass('active')
     $('.app-div').hide().eq(index).show().removeClass('fadeOutDown')
  }
});

Updated Demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 22, 2016 at 16:19

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frshjb373 Over a year ago

exactly what I was looking for! Works great.

Artur Filipiak · Accepted Answer · 2016-09-22 16:28:38Z

2

Not sure if that's what you're looking for (it's difficult to make "no-glitchy" toggle using only animate.css)

$('.app-icon').click(function() {
  $('.app-icon.active').not(this).removeClass('active');
  var index = $(this).toggleClass('active').index();
  $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown').hide();
});

and apply style for .active class

.app-icon.active{ color:green; }

JSFiddle

edited Sep 22, 2016 at 16:28

answered Sep 22, 2016 at 16:19

Artur Filipiak

9,1874 gold badges33 silver badges56 bronze badges

Comments

niboc · Accepted Answer · 2016-09-22 16:22:06Z

"addClass" and "removeClass" (two last sentences)
I think the ".hide()" was the problem, but you also need to add and remove class for "fadeOutDown" effect.

Try this:

$('.app-icon').click(function() {
  var index = $(this).index();
  if($('.app-div').eq(index).is(":visible"))
  {
    $('.app-div').eq(index).addClass('fadeOutDown').slideUp();
  }
  else
  {
    $('.app-div').eq(index).removeClass('fadeOutDown').slideDown().siblings('.app-div').slideUp();
  }
  $('.app-icon.current').removeClass("current");
  $(this).addClass("current");
});

EDIT: To remove the current class by clicking itself you should move the addClass("current") inside the else statement. Here is a working demo https://jsfiddle.net/a5osx7y6/5/

aasiph · Accepted Answer · 2016-09-22 16:57:42Z

Here is the perfect finishing to Artur reply

HTML

<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 style="position: relative">
    <div class="app-div">
    content div 1
    </div>

    <div class="app-div">
    content div 2
    </div>

    <div class="app-div">
    content div 3
    </div>
</div>

CSS

.app-div {display: none; position: absolute; top: 0; left: 0;}
.app-icon .fa {transition: background-color 0.5s ease;}
.app-icon .fa:hover {background: #ccc;}
.app-icon.active {background: #CD87BA;}

JavaScript

$('.app-icon').click(function() {
  $('.app-icon.active').not(this).removeClass('active');
  var index = $(this).toggleClass('active').index();
  $('.app-div').eq(index).toggleClass('fadeInUp fadeOutDown').show().siblings('.app-div').removeClass('fadeInUp').addClass('fadeOutDown');
});

//animate.css effect
$('.app-div').addClass('animated fadeOutDown');

Working JSFiddle

Collectives™ on Stack Overflow

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

4 Answers 4

Updated Demo

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related