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() {
});
});
});