I have three different buttons with three different divs that each toggle an applicable div in same place. Trying to do 2 things.
.app-icon
button when relative .app-div
is showing so that I can add background color when active..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/
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')
}
});
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; }
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/
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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.