neilgee
6/28/2017 - 9:18 AM

slideToggle jQuery Multiple Items - Open One Shuts The Other

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