jQuery Slidetoggle examples

1.  Simplest Method
<script>
$(document).ready(function(){
  $("button.demo").click(function(){
    $(this).parent().find('p').slideToggle("slow");
  });
});
</script>
HTML
<div class="main">
<button class="demo">Toggle slideUp() and slideDown()</button>
<p>This is a paragraph.</p>
</div>
<div class="main">
<button class="demo">Toggle slideUp() and slideDown()</button>
<p>This is a paragraph.</p>
</div>
<div class="main">
<button class="demo">Toggle slideUp() and slideDown()</button>
<p>This is a paragraph.</p>
</div>


2. Second example
<script type="text/javascript">
jQuery(document).ready(function($) {
    // Find the toggles and hide their content
    $('.toggle').each(function(){
        $(this).find('.toggle-content').hide();
    });
    // When a toggle is clicked (activated) show their content
    $('.toggle a.toggle-trigger').click(function(){
        var el = $(this), parent = el.closest('.toggle');
        if( el.hasClass('active') )
        {
            parent.find('.toggle-content').slideToggle();
            el.removeClass('active');
        }
        else
        {
            parent.find('.toggle-content').slideToggle();
            el.addClass('active');
        }
        return false;
    });
});  //End

<!-- Toggle CSS --> 
<style type="text/css">   
.toggle {    
font-size: 13px;
    line-height:20px;    
margin-bottom: 10px;  
border: 1px solid #e5e5e5;  
-webkit-border-radius: 5px;    
-moz-border-radius: 5px;          
border-radius: 5px;  
}
.toggle a.toggle-trigger {  
display:block;  
padding: 10px 20px 15px 20px;  
position:relative;  
text-decoration: none;  
color: #666;
}
.toggle a.toggle-trigger:hover {  
opacity: .8;  
text-decoration: none;
}
.toggle a.active {  
text-decoration: none;  
border-bottom: 1px solid #e5e5e5;  
-webkit-box-shadow: 0 8px 6px -6px #ccc;    
-moz-box-shadow: 0 8px 6px -6px #ccc;          
box-shadow: 0 8px 6px -6px #ccc;  
color: #000;
}
.toggle a.toggle-trigger:before {  
content: "-";  
margin-right: 10px;  
font-size: 1.3em;  
}
.toggle a.active.toggle-trigger:before {  
content: "+";
}
.toggle .toggle-content {  
padding: 10px 20px 15px 20px;  
color:#666;
}
</style>

Html part
<div class="toggle">
    <a href="#" title="Title of Toggle" class="toggle-trigger">This is testing</a>
    <div class="toggle-content">
        <p>This is testing done by sudhir pandey.You can also implement it.</p>
    </div>
</div>
<div class="toggle">
    <a href="#" title="Title of Toggle" class="toggle-trigger">This is my second testing</a>
    <div class="toggle-content">
        <p>This is my second testing text.</p>
    </div>
</div>

Example 3: SlideUp and SlideDown 
// Open Current active div only and hide other

HTML
<ul id="toggle-view">
<li>
<div class="panelCollapse">
<h3>Panel 1</h3>
<span>+</span>
</div>
<div class="panel">
<div class="panel-body">
This is panel 1 body.
</div>
</div>
</li>
<li>
<div class="panelCollapse">
<h3>Panel 2</h3>
<span>+</span>
</div>
<div class="panel">
<div class="panel-body">
This is panel 2 body.
</div>
</div>
</li>
<li>
<div class="panelCollapse">
<h3>Panel 3</h3>
<span>+</span>
</div>
<div class="panel">
<div class="panel-body">
This is panel 3 body.
</div>
</div>
</li>
</ul>

CSS
#toggle-view {
list-style:none;
margin:0;
padding:0;
width:100%;
}
#toggle-view li {
margin:5px 0px;
border-bottom:1px solid #ccc;
position:relative;
cursor:pointer;
}
#toggle-view h3 {
margin:0;
font-size:1.3em;
background:#f3f3f3;
color:#333;
text-transform:uppercase;
padding:14px 12px;
}
.panelCollapse{
border-left:1px solid #ccc;
border-top:1px solid #ccc;
border-right:1px solid #ccc;
}
.panelCollapse span {
background-color: #0099da;
    color: #fff;
    content: "−";
    float: right;
    font-family: "FontAwesome";
    height: auto;
    margin-right: -15px;
    margin-top: -5px;
    padding:14px 0;
    text-align: center;
    width: 33px;
position:absolute;
top:6px;
right:15px;
font-size:24px;
}
#toggle-view .panel {
margin:0px;
display:none;
border:1px solid #cecccc;
}

javascript
<script>
$(document).ready(function(){
$('#toggle-view .panelCollapse').click(function () {
var text = $(this).parent().children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('-');
} else {
text.slideUp('200');
$(this).children('span').html('+');
}
$(this).parent().siblings().children('div.panel').slideUp('200');
$(this).parent().siblings().children('div.panelCollapse').find('span').html('+');
});
});
</script>