Last active
June 28, 2017 23:02
-
-
Save neilgee/72c1a230e1d46de526ef6306f873473e to your computer and use it in GitHub Desktop.
slideToggle jQuery Multiple Items - Open One Shuts The Other
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment