Toggle: JQuery and +/- (version 1)

by Matthew Schenker

HTML

<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<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>

JavaScript

$(document).ready(function() {
  $(".slidingDiv").hide();

  $('.show_hide').click(function(e) {
    $(".slidingDiv").slideToggle(700);
    var val = $(this).text() == "Categories -" ? "Categories +" : "Categories -";
    $(this).hide().text(val).fadeIn("fast");
    e.preventDefault();
  });
});