show hide slidetoggle

by Vetrivel Samidurai

HTML

<a href="#" class="show_hide" id="plus">show</a>

<div class="slidingDiv" style="display: block;">
Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>

CSS

.show_hide {
    display:none;
}

JavaScript

$(document).ready(function(){

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

   $('.show_hide').toggle(function(){
       $("#plus").text("hide");
       $(".slidingDiv").slideDown();
       
   },function(){
       $("#plus").text("show");
       $(".slidingDiv").slideUp();
   });
    
});