SlideUp SlideDown for multiple divs

Question

I would like to glide over several divs, as is done in this script:

http://jsfiddle.net/jakecigar/XwN2L/2154/

The functionality of this script is good, but I need the hidden content to slide up before the next content slides down in sequence.

In addition, when you click on the active div link when it is open, it will cause it to move and be hidden, as is done for the site menu.

Here is the HTML:

<style>.targetDiv {display: none}</style> <a class="showSingle" target="1">Div 1</a> <a class="showSingle" target="2">Div 2</a> <a class="showSingle" target="3">Div 3</a> <a class="showSingle" target="4">Div 4</a> <div id="div1" class="targetDiv">Lorum Ipsum1</div> <div id="div2" class="targetDiv">Lorum Ipsum2</div> <div id="div3" class="targetDiv">Lorum Ipsum3</div> <div id="div4" class="targetDiv">Lorum Ipsum4</div> 

Here is the script:

 jQuery(function(){ jQuery('.showSingle').click(function(){ jQuery('.targetDiv').slideUp(); jQuery('.targetDiv').hide(); jQuery('#div'+$(this).attr('target')).slideToggle(); }); }); 

Answer 1

Here is a solution that uses the active class to create the appropriate functionality when nothing is displayed or the div associated with the currently displayed item is clicked.

 jQuery(function($){ $('.showSingle').click(function(){ var itemid = '#div'+$(this).attr('target'); //id of the element to show/hide. //Show the element if nothing is shown. if($('.active').length === 0){ $(itemid).slideDown(); $(itemid).addClass('active'); //Hide the element if it is shown. } else if (itemid == "#"+$('.active').attr('id')) { $('.active').slideUp(); $(itemid).removeClass('active'); //Otherwise, switch out the current element for the next one sequentially. }else { $('.active').slideUp(function(){ $(this).removeClass('active'); if ($(".targetDiv:animated").length === 0){ $(itemid).slideDown(); $(itemid).addClass('active'); } }); } }); }); 

See http://jsfiddle.net/m6aRW/1/

EDIT
This will break if something else on your page already uses the active class. Use a different class name or a more precise selector.

Answer 2

You need to call sequential animations from the function to complete previous animations. This will allow you to start one when it ends, start the next when it ends, start the next as shown.

It’s not entirely clear to me how you want the behavior to work. If you could explain this better, I could offer sample code.

Guess what you want, here is an example:

 jQuery(function(){ jQuery('.showSingle').click(function(){ // get visible targetDivs var vis = jQuery('.targetDiv:visible'); // get the item we're supposed to show from an attribute on what was clicked var targetItem = $(this).attr('target'); // make jQuery object for target var target = jQuery('#div' + targetItem); // assume we want to slideDown var fn = function() { target.slideDown(); }; // if there are some visible,then we will get a completion function // and should hide visible items if (vis.length) { if (vis[0].id == "div" + targetItem) { // if clicking on the one that already shown, // nothing to show on completion fn = function() {}; } vis.slideUp(fn); } else { // otherwise, just show the selected one (none to hide) target.slideDown(); } }); }); 

Working demo: http://jsfiddle.net/jfriend00/fd4Nn/