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

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:
<i class="fa fa-calculator" aria-hidden="true"></i>
<i class="fa fa-sun-o" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
<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')
}
});
Updated Demo

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

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

Here is the perfect finishing to Artur reply
HTML
<i class="fa fa-calculator" aria-hidden="true"></i>
<i class="fa fa-sun-o" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
<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

Related

How to toggle <div> show and hide with JS

<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am making a website and I need a bit of assistance with toggling div being shown and not shown with
<span> and <button> the thing I am toggling is a div section with search and items underneath it, and it just shows the boxes with the content and I want the users to be able to toggle the visibility. Here's what I have tried:
<div class="warnAA1">
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'none';">
<button>×</button>
</span>
<span onClick="document.getElementsByClassName('warnAA1')[0].style.display = 'content';">
<button> - </button>
</span>
</div>
I am just stuck on how to toggle the content being displayed.
<div class="warnAA1">
<button onclick="showContent()">×</button></span>
<button onclick="removeContent()"> - </button></span>
<div class = "content">
Here is div content
</div>
</div>
<script>
const warnDiv = document.querySelector('.warnAA1');
const warnDivContent = warnDiv.querySelector('.content');
function showContent(){
warnDivContent.style.display = 'none';
}
function removeContent() {
warnDivContent.style.removeProperty('display');
}
</script>
You can use the slideToggle() method in jQuery to achieve your requirement easily.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").slideToggle();
});
});
</script>
</head>
<body>
<div>This is a paragraph.</div><br><br>
<button>Toggle slideUp() and slideDown()</button>
</body>
</html>
There are a couple of ways you can do this: I'd highly recommend you use ids to not have to worry about relative position querying multiple elements etc. I've also added a toggle button to show how that can work.
var show = document.getElementById("show");
var hide = document.getElementById("hide");
var warn = document.getElementById("warn");
var toggle = document.getElementById("toggle");
show.addEventListener("click", function() {
warn.classList.remove("hide");
});
hide.addEventListener("click", function() {
warn.classList.add("hide");
});
// Toggle logic
toggle.addEventListener("click", function() {
warn.classList.toggle("hide");
});
.warnAA1 {
background-color: #aaaaaa;
min-height: 200px;
transition: opacity .5s ease-in-out;
}
.warnAA1.hide {
opacity: 0;
}
.abs {
position: absolute;
top: 10px;
left: 10px;
}
<div id="warn" class="warnAA1">
</div>
<div class="abs">
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="toggle">Toggle</button>
</div>
As you have both your buttons inside the content you are trying to hide both the buttons hide along with the parent please try the following code snippet and let me know if it works. Placing the buttons outside should fix it.
function Hide(){
document.getElementsByClassName('warnAA1')[0].style.display = 'none';
}
function Show(){
document.getElementsByClassName('warnAA1')[0].style.display = 'block';
}
<span onClick="Hide()"><button>×</button></span>
<span onClick="Show()"><button> - </button></span>
<div class="warnAA1">
MY content
</div>

Add/Remove class on mouseleave

I have a dropdown Menu opening on click and when the font-awesome fa-bars icon is clicked the fa-bars class is removed and then the font-awesome fa-times class is added.
I also have a mouseleave function that closes the dropdown container when your mouse exits. My question is to see if I can have the icon class change from fa-times to fa-bars on mouseleave.
This is the code that changes the icon on click
<i id="toggleMega" class="fa fa-bars megaNavIcon"></i>
$('#toggleMega').click(function(){
var ele = $('.megaNavIcon');
if(ele.hasClass('fa-bars')){
ele.removeClass('fa-bars')
.addClass('fa-times')
}
else{
ele.addClass('fa-bars')
.removeClass('fa-times')
}
});
This is the code that closes the container on mouseleave
$('.megaNav').on('mouseleave', function() {
$(".megaNav").collapse("hide");
});
Just add the the removeClass() and addClass() methods inside your mouseleave function like this:
$('.megaNav').on('mouseleave', function() {
$(".megaNav").collapse("hide");
$('#toggleMega').removeClass('fa-times');
$('#toggleMega').addClass('fa-bars');
});
Or you can simplify this further by using the toggleClass() method like this:
$('.megaNav').on('mouseleave', function() {
$(".megaNav").collapse("hide");
$('#toggleMega').toggleClass(function(){
return $(this).hasClass('fa-times') ? 'fa-bars' : '';
});
});
CSS should be your first choice for UI/layout functionality. A simple .myclass:hover{} rule is a super easy way to highlight items on mouseenter mouseleave events.
li:hover {
font-weight: bold;
cursor: pointer;
}
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Boo</li>
<li>Yah</li>
<ul>

Simple Next and Previous Show and Hide with jQuery

I'm trying to figure out the simplest way to show and hide a series of divs with Previous and Next buttons by adding and removing some classes.
So far, I can get the Next button to trigger, but it's adding the active class to all of the divs and not just the next one in line.
I've been reading through other examples and so far they seem really bloated or not what I am looking for specifically.
Here's what I have so far:
Codepen Link: https://codepen.io/ultraloveninja/pen/pxrrmy/
HTML:
<div class="group">
<div class="item active">
<h2>Thing One</h2>
</div>
<div class="item">
<h2>Thing Two</h2>
</div>
<div class="item">
<h2>Thing Three</h2>
</div>
</div>
<div class="btns">
Previous
<a class="btn next" href="#">Next</a>
</div>
JS:
$('.next').on("click", function(){
if($('.item').hasClass('active')) {
$('.item').next().addClass('active');
}
})
CSS:
body {
padding: 10px;
}
.active {
display:block !important;
}
.item {
display:none;
}
It seems like this should be fairly simple, but I can't seem to think of how to target the next div by itself without it showing all of the other ones.
Basically you should get your last active element and activate next after it:
$('.next').on("click", function(){
const $active = $('.item.active');
const $next = $active.next();
if ($next.length) {
$active.removeClass('active');
$next.addClass('active');
}
})
The problem in your current code is that you are getting all items and performing hasClass on all of them so it returns true all the time because there is at least one element with this class and then you are getting next element after each item element and add active class to them so all of your elements are activated in result.
I think you want something like this
$('a.next').on("click", function(){
var a = $('.item.active').last();
a.next().addClass('active');
a.removeClass('active')
});

Fade pictures in/out on mouseover

I have a series of pictures with a class of .player__headshot and right now it's fading out the image that's being moused over as opposed to the other 59 images in the series.
<div class="player player--goalie">
<div class="player__headshot player--elder">
<div class="picked is-active">
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</div>
<p class="player__name">Brian Elder</p>
<p class="player__position">Goalie</p>
</div>
$(".player__headshot").on("mouseover", function(){
$(this).css("opacity", 0.25);
});
$(".player__headshot").on("mouseout", function(){
$(this).css("opacity", 1);
});
To fix this you can select all the .player__headshot elements and exclude the current one using not(), before fading them all back on mouseleave.
Also note that you can achieve this more effectively using hover(); it's shorter and uses mouseenter and mouseleave events instead:
$(".player__headshot").hover(function(){
$(".player__headshot").not(this).css("opacity", 0.25);
}, function() {
$(".player__headshot").css("opacity", 1);
});
The code below will fade out everything that has the class player_headshot
$(".player__headshot").on("mouseover", function(){
$(".player_headshot").css("opacity", 0.25);
});
If you want to keep the image you've moused over active, then you will need to change the class on that image to prevent it from being affected.
If you are using JQuery, perhaps remove the class from the selected image on mouseover or something like that.

Can you transition a display property? If not, what's the best solution?

I'm trying to do a transition on a list item:
HTML
<ul>
<li class="resume"><i class="fa fa-file-text-o"></i> Resumé</li>
<li><i class="fa fa-instagram"></i> Bio</li>
<li id="backtoprojects" class="is-hidden"></i> Back to Projects</li>
</ul>
Javascript
$('#backtoprojects').removeClass('is-hidden');
// hide back-to-projects-button on click of "backtoproject"
$('#backtoprojects a').on('click', function(){
hasher.setHash();
$('#backtoprojects').addClass('is-hidden');
});
$('[data-type="projectDie"]').click(function() {
$('body').removeClass('projectLoaded');
return false;
})
;
CSS
.navbar ul li.is-hidden {
display: none;
}
So right off the bat the "Back to Projects" is hidden, it appears when a project is clicked on, and if you click on "Back to Projects" again it hides itself. I tried swapping display:none for opacity or visibility but you can still see the spacing as if "Back to Projects" was still there. I envisioned the "Back to Projects" link to slide in from the right as the entire <ul> is float: right.
Try something like this:
$('#backtoprojects').hide();
$('a').on('click', function(){
$('#backtoprojects').show('slow');
});
$('#backtoprojects').on('click', function(){
$(this).hide('slow');
});
Full code here: https://jsfiddle.net/hdbj2rec/1/
Or you can use CSS to hide #backtoprojects initially.

Categories

Resources