Show/hide DIV with jQuery

by Arete

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://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("-");
    $(".slidingDiv").slideDown();

  }, function() {
    $("#plus").text("+");
    $(".slidingDiv").slideUp();
  });

});