Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active June 28, 2017 23:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save neilgee/72c1a230e1d46de526ef6306f873473e to your computer and use it in GitHub Desktop.
Save neilgee/72c1a230e1d46de526ef6306f873473e to your computer and use it in GitHub Desktop.
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment