slideToggle jQuery Multiple Items - Open One Shuts The Other
jQuery(document).ready(function($){
// 4 links showing hiding 4 panels
// Links have class .show1 to .show4
// Panels have class .row1 to .row4 and also share a common .row class
// The .row class is called to close the inacticve panels with .slideup()
// The .toggleclass() is used on the link to change a pseudo icon to an open/close state
// For just a single iteration of .slideToggle() - just remove the .slideup() line.
$( ".show1" ).click(function() {
$(".row").not(".row1").slideUp();
$( ".row1" ).slideToggle( "slow", function() {
// Animation complete.
});
$( this ).toggleClass( "tick-list-close" );
});
$( ".show2" ).click(function() {
$(".row").not(".row2").slideUp();
$( ".row2" ).slideToggle( "slow", function() {
// Animation complete.
});
$( this ).toggleClass( "tick-list-close" );
});
$( ".show3" ).click(function() {
$(".row").not(".row3").slideUp();
$( ".row3" ).slideToggle( "slow", function() {
// Animation complete.
});
$( this ).toggleClass( "tick-list-close" );
});
$( ".show4" ).click(function() {
$(".row").not(".row4").slideUp();
$( ".row4" ).slideToggle( "slow", function() {
// Animation complete.
});
$( this ).toggleClass( "tick-list-close" );
});
});
// Ref - https://stackoverflow.com/questions/7402659/js-slidetoggle-close-other-open-divs