JQUERY HIDE and SHOW WIth Plus Minus ICON

JQUERY HIDE and SHOW WIth Plus Minus ICON

by Rich Costello

HTML

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

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

CSS

.show_hide {
    display:none;
}

a{
    
    text-decoration:none;
    background:#000;
    color:#fff;
    display:inline-block;
    padding:10px;
}


#plus{
  color:red;
  font-size:12px
}

JavaScript

$(document).ready(function(){

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

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