Multiple dropdown menus slide toggle - javascript

I have three (or more in the future) dropdown menus that are show when clicked on a 'trigger'
The code is functional but I want the slideUp animation to finish before another slideDown animation begins.
Note that the 'dropdown' elements are positioned absolutely, top:100% in relation to the 'container' so they appear under the 'triggers'
The code on Codepen
HTML
<div class="container">
<div class="drop-container">
<span class="trigger">Drop 1</span>
<div class="dropdown">
<p>First Dropdown</p>
</div>
</div>
<div class="drop-container">
<span class="trigger">Drop 2</span>
<div class="dropdown">
<p>Second dropdown</p>
</div>
</div>
<div class="drop-container">
<span class="trigger">Drop 3</span>
<div class="dropdown">
<p>Third dropdown</p>
</div>
</div>
</div>
jQuery
var $container = $('.drop-container'),
$trigger = $('.trigger');
$trigger.on('click',function(){
var $this = $(this).siblings('.dropdown');
$container.find('.dropdown').slideUp();
if($this.is(':visible')) {
$this.hide('fast');
}
else {
$this.slideDown();
}
});

You could just add a delay
$this.delay(500).slideDown();
but as pointed out it in the comments would be better to use the callback.
Codepen Example

There is a way to do this without using timers. You can basically add a class to the element that has slide down and use the "oncomplete" property of jQuery slide. Replace your javascript with the below and it should work live example here
$container = $('.drop-container')
$trigger = $('.trigger')
$trigger.on('click',function(){
var $drop = $(this).siblings('.dropdown')
$down = $container.find('.down')
if($down.length > 0){
$down.slideUp(function() {
$(this).removeClass('down')
$drop.addClass('down')
$drop.slideDown()
})
}
else{
$drop.addClass('down')
$drop.slideDown()
}
})

Related

Is this a stable way to show/hide a div and a certain "id" using jQuery or could I use a better approach?

I have two containers, one is a page of link blocks and a have another container hidden. In the hidden container there is articles that link to the main pages link blocks. So user "clicks" LINK ONE in the main container which then hides the main container, shows the originally hidden container and ONLY displays the id article it is linked to. There is then a "back to library" button which will take you back to the main container and set everything back to square one. I have it working at the moment but I'm not sure if it is the right way to achieve this? I know there is no right or wrong and if it works, it works but just wondering for peace of mind. Thanks :)
CODEPEN: https://codepen.io/mDDDD/pen/ZEObRdR
HTML:
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
jQuery:
$('.show-article').on('click', function (e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut();
setTimeout(function () {
$('#articles').fadeIn();
}, 500);
});
$('.back-to-library').on('click', function (e) {
e.preventDefault();
$('#articles').fadeOut();
setTimeout(function () {
$('#articleBlocks').fadeIn();
}, 500);
});
Consider using the callback for .fadeOut() to then call .fadeIn(). Nothing wrong with that you did, this will just ensure the item is faded out before executing further code.
$(function() {
$('.show-article').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('href');
$(id).show().siblings('div').hide();
$('#articleBlocks').fadeOut(500, function() {
$('#articles').fadeIn();
});
});
$('.back-to-library').on('click', function(e) {
e.preventDefault();
$('#articles').fadeOut(500, function() {
$('#articleBlocks').fadeIn();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container--article-blocks" id="articleBlocks">
<div class="article-block">
<a class="show-article" href="#articleOne">LINK ONE</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleTwo">LINK TWO</a>
</div>
<div class="article-block">
<a class="show-article" href="#articleThree">LINK THREE</a>
</div>
</div>
<!-- articles -->
<div class="container--articles" id="articles" style="display: none;">
back to Library
<div id="articleOne" class="article-block-articles">One</div>
<div id="articleTwo" class="article-block-articles">Two</div>
<div id="articleThree" class="article-block-articles">Three</div>
</div>
You can make the visibility: hidden; after an event!
Actual example
document.getElementById("XXX").style.visibility = "hidden";
But actually, your project is just fine!
For more info, go here https://www.w3schools.com/jsref/prop_style_visibility.asp
This explains the HTML DOM visibility property!

Javascript hide/show div

I have a javascript hide/show div with 4 different divs going. It is working partially but not performing the way I would like. When I click one of the divs it opens up the hidden div, which is perfect, but when I click the other link to open up the other div I want the other one I clicked first to close and then the new one to open. Here is my javascript.
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggle('hide');
});
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show' data-value="content1"><div class="witb">
<hr class="dark2">
<p></p>Whats in the Bag <i class="fa fa-angle-down" style="font-size:24px"></i></p>
</div>
</div></a>
<div id='content2' style="display:none">
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
<div class="wedge-thumbs">
<img class="thumbs" src="build/wedge-thumb.png?$staticlink$" alt="Milled Grind Header">
<span style="customize"> Customize It</span>
<hr class="dark">
<span class="title">Milled Grind 54° LB</span>
</div>
</div>
// Hopefully you have some selector reference to target them all
var $all = $(".drops"); // Clearly I used .drops for example
$('[data-value]').on('click', function(event) {
var $target = $('#'+ this.dataset.value);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
Here's an improved example:
var $all = $(".togglable");
$('[data-toggle]').on('click', function(event) {
var $target = $(this.dataset.toggle);
$all.not( $target ).hide(); // Hide all but target one
$target.toggle(); // Toggle target one
});
[data-toggle]{cursor:pointer; display:inline-block; color:#0bf; padding:0 8px;}
.hidden{display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-toggle="#el1">TOGGLE1</a>
<a data-toggle="#el2">TOGGLE2</a>
<a data-toggle="#el3">TOGGLE3</a>
<div id="el1" class="togglable hidden">ELEMENT1</div>
<div id="el2" class="togglable hidden">ELEMENT2</div>
<div id="el3" class="togglable hidden">ELEMENT3</div>
Please try this
$('[id^="hideshow"]').on('click', function(event) {
var dataValue = $(this).attr('data-value');
dataValue = $('#'+dataValue);
$(dataValue).toggleClass('hide');
});
It will be better if you could give your divs a common class instead of ids so you could hide other divs using this common class like :
$('.common_class').addClass('hide');
If you cant you could loop through all the divs and hide them before showing the current clicked one :
$('[id^="hideshow"]').on('click', function(event) {
$('[id^="hideshow"]').each(function(){
$('#'+$(this).data('value')).addClass('hide');
});
dataValue_id = $('#'+$(this).data('value'));
$(dataValue_id).toggleClass('hide');
});
Hope this helps.
Snippet using common classes :
$('.common_class').on('click', function(event) {
$('.common_class_2').not($('.common_class_2', this)).addClass('hide');
$('.common_class_2', this).toggleClass('hide');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='common_class'>DIV 1
<p class='common_class_2'>Content 1</p>
</div>
<div class='common_class'>DIV 2
<p class='common_class_2 hide'>Content 2</p>
</div>
<div class='common_class'>DIV 3
<p class='common_class_2 hide'>Content 3</p>
</div>
<div class='common_class'>DIV 4
<p class='common_class_2 hide'>Content 4</p>
</div>

JQuery hide() not persisting after hide event

I'm trying to hide a visible section then show a hidden section using JQuery .hide() and .show(). When the event fires (on clicking an image) it only hides the visible section momentarily, then becomes visible again with the previously hidden section now visible below the first visible section. Based on the docs I've read and some tutorials I've watched this shouldn't be happening.
HTML:
<div class="transition-div">
<section class="project-section">
<div class="project-wrapper" id="project-one">
<div class="desc-text">
<h2>Header</h2>
</div>
<div class="project-image-wrapper">
<img class="project-image" id="project-img-one" src="images/img1.png">
<button class="project-button">Button
</button>
</div>
</div>
</section>
<section class="project-section hidden">
<div class="project-wrapper">
<div class="desc-text">
<h2>Header</h2>
<p>Some description text</p>
</div>
<div class="project-image-wrapper">
<img class="project-image" src="images/img1.png">
</div>
</div>
</section>
</div>
JS:
$('.hidden').hide();
var slideSection = function() {
$('.project-image-wrapper').click(function() {
var $parentDiv = $(this).parents('.transition-div');
var $childToShow = $parentDiv.find('.hidden');
var $childToHide = $childToShow.siblings('.project-section');
$childToHide.hide(300, hideActiveSection());
function hideActiveSection() {
$childToHide.addClass('hidden');
$childToShow.show(300, function() {
$(this).removeClass('hidden');
});
}
});
};
slideSection();
How would I get the section I want to hide to do so persistently until I click the currently visible project image to show it? Could my CSS be interfering with what I want to do here? If so I'll post the code. Thanks!

Jquery if div hasClass do something with a other div

Here is my problem (besides the fact that i'm a beginnen with javascript). I am building a page that wil load ajax content into a HTML page with a tab plugin. We need to build one page only which has to carry loads of content. Everything is working fine but we need to have little enhancement that uses javascript.
The first set are the tabs (ul.tabs) the second set are the content placeholders (div.panel-container) the third set is a layer popup (div#popup)
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="#popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
Now based on which tab is active the current scripts set the active status. Now what i need to do is create a script that checks (hasClass) which div within the .panel-container hasClass "active". But then it should addClass to the div within div#popup. But they have to match.
So if div#one hasClass "active" then addClass to div.one-ph,
if div#two hasClass "active" then addClass to div.two-ph etc.
Now in this example there are only three but the finished document will have about 20. kan somebody help me create this, i tried almost every example but is does not work. Also this is not a click function but a function that should work probably on document ready.
Please help this desperate guy
UPDATED
Fiddle
jQuery(document).ready(function() {
jQuery('.panel-container > div.active').each(function() {
var id = jQuery(this).attr('id');
var target = '.' + id + '-ph';
jQuery(target).addClass('active');
});
jQuery('ul.tabs > li.tab a').click(function(e) {
e.preventDefault();
var target = jQuery(this).attr('data-target');
var targetPopup = '.' + target.replace('#', '') + '-ph';
jQuery('.panel-container .active, #popup .active').removeClass('active');
jQuery(target).addClass('active');
jQuery(targetPopup).addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax-tab-container" class='tab-container'>
<ul class='tabs'>
<li class='tab'>one</li>
<li class='tab'>two</li>
<li class='tab'>three</li>
</ul>
<div class='panel-container'>
<div id="one" class="active"></div>
<div id="two"></div>
<div id="three"></div>
</div>
<div id="popup">
<div class="one-ph">Content</div>
<div class="two-ph">Content</div>
<div class="three-ph">Content</div>
</div>
</div>

jQuery how to make slideToggle applies one each item

How can I make this toggle fadein fadeout applies on each itemsblock? when I click anyone, it applies all of them.
Could someone please help ? Thanks
Online Sample
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
<div class="items">
<div class="warp">
<span class="change">Tester</span>
<span class="click">expand</span>
</div>
<div class="invisible">
<div class="red"> red </div>
<div class="black"> black </div>
</div>
</div>
jQuery
$('.invisible').hide();
$('.warp').addClass('bg');
$(".warp").click(function () {
$(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$('.warp').removeClass('bg');
}else{
$('span.click').css('visibility', 'visible');
$('.warp').addClass('bg');
}
});
$('span.click').css('visibility', 'hidden');
});
How can I make this toggle fadein fadeout applies on each itemsblock?
when I click anyone, it applies all of them.
This is because you use $(".invisible") which selects all elements with the class invisible. You have to find the element related to your toggle element(your .warp element), which in your case would be like this: $warp.next(".invisible").
See the updated FIDDLE.
Updated your jQuery code:
$(".warp").click(function () {
var $warp = $(this);
$warp.next(".invisible").slideToggle("slow", function () {
if ($(this).is(':visible')) {
$warp.removeClass('bg');
}else{
$warp.find('span.click').css('visibility', 'visible');
$warp.addClass('bg');
}
});
$warp.find('span.click').css('visibility', 'hidden');
});
HERE: jsfiddle
jquery:
$('.invisible').hide();
$(".warp").click(function () {
$(this).next('div').slideToggle("slow", function () {
$(this).prev('div').toggleClass('bg');
$(this).prev('div').find('.click').slideToggle("fast", function () {});
});
});

Categories