I would like to slideToggle multiple divs as done in this fiddle:

http://jsfiddle.net/XwN2L/2148/

The functionality of this script is good, but I need the hidden content to slide up before the next content slides down. So that when one div is visible and you click the link to show another div, the one that is open first slides up before the one you clicked slides down.

Also, when you click the active div link while it is open, it will cause it to slideup and be hidden

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(); }); });