Skip to content

 

Use jQuery SlideToggle to Show/Hide Multiple Rows or Divs

Author: 

wpbeaches


Description: 

A list of the triggers that will open close the corresponding div/row – clicking a different list item will close the open content and open the relevant one.




Kind:

CSS, HTML, jQuery


CSS:

.row {
display: none;
}


HTML:

<!-- The links -->
<ul>
<li class="show1 show">Blue Row</li>
<li class="show2 show">Red Row</li>
<li class="show3 show">Green Row</li>
<li class="show4 show">Yellow Row</li>
</ul>

<!-- The Rows -->
<div class="row1 row">Blue Content</div>
<div class="row2 row">Red Content</div>
<div class="row3 row">Green Content</div>
<div class="row4 row">Yellow Content</div>


Javascript:

jQuery(document).ready(function($){

$( ".show1" ).click(function(e) {
e.preventDefault();
$(".row").not(".row1").slideUp();
$( ".row1" ).slideToggle( "slow", function() {
});
});

$( ".show2" ).click(function(e) {
e.preventDefault();
$(".row").not(".row2").slideUp();
$( ".row2" ).slideToggle( "slow", function() {
});
});

$( ".show3" ).click(function(e) {
e.preventDefault();
$(".row").not(".row3").slideUp();
$( ".row3" ).slideToggle( "slow", function() {
});
});

$( ".show4" ).click(function(e) {
e.preventDefault();
$(".row").not(".row4").slideUp();
$( ".row4" ).slideToggle( "slow", function() {
});
});

});


URL: