Toggle: JQuery and +/- (version 2)

by Matthew Schenker

HTML

<a href="#" class="show_hide">Categories</a>
<div class="slidingDiv">
  <ul>
    <li>Category 1</li>
    <li>Category 2</li>
    <li>Category 3</li>
    <li>Category 4</li>
  </ul>
</div>

CSS

.show_hide {
  display: none;
}

.plus:after {
  content: " +";
  font-size: 24px;
}

.minus:after {
  content: " -";
  font-size: 24px;
}

.slidingDiv {
	border: 1px solid #ddd;
	display: block;
}

JavaScript

$(document).ready(function() {
  $(".slidingDiv").hide();
  $(".show_hide").addClass("plus").show();
  $('.show_hide').toggle(
    function() {
      $(".slidingDiv").slideDown();
      $(this).addClass("minus");
      $(this).removeClass("plus");
    },
    function() {
      $(".slidingDiv").slideUp();
      $(this).addClass("plus");
      $(this).removeClass("minus");
    }
  );
});