jQuery slideToggle()

Supporting example to help BruceGust on Experts-Exchange (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28605701.html)

by Keith Jeter

HTML

<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>
<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>
<div class="show_hide"><a href="#">Show/hide</a></div>
<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="hideMe">hide</a></div>

CSS

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}
 
.show_hide {
    display:none;
}

JavaScript

$(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
    $(this).next().slideToggle();
});


$('.hideMe').click(function(){
    $(this).parent().slideDown();
});