Show	Hide

<style type="text/css">
.hide { display:none; }
.hideable { background: #222222; padding:5px; }
.hBox { padding:5px; }
.hShow { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/minus.png) no-repeat; height:14px; position:relative; left:-2em; top:-1em; }
.hHide { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/plus.png) no-repeat; height:14px; position:relative; left:-2em; top:-1em; }
</style>
<script type="text/javascript">
$(document).ready(function() {
 var hideshowSpeed = 500;
 $(".hideable").each(function(){
  $(this).wrap("<div class='hWrap'></div>").before("<div class='hShow'></div>");
 })
 $(".hWrap").click(function(){
  $(this).find(".hShow").toggleClass("hHide");
  $(this).find(".hideable").slideToggle(hideshowSpeed);
 });
 $(".hide").prev(".hShow").toggleClass("hHide");
 $(".hLink").each(function(){
  $(this).attr("href","javascript:void(0);").click( function() {
   $(this).next(".hBox").toggle(hideshowSpeed);
  })
 })
});
</script>

• Link - Click on a link to show/hide content:
  
  
• Add the following HTML with the named classes (in purple)
  
  <a class="hideLink" href="#">LINK TITLE</a>
  <div class="hideBox hide">STUFF TO SHOW/HIDE</div>
  
  
• Note: There can't be any HTML between the "</a>" and "<div class="hideBox hide">"
  
  
• If you want to start out with the box content showing, remove the class "hide" (in greenl).
  
  <div class="hideBox">
  
  
• Image - Click on an image to show/hide the content:
  
  
• Add the class "hideable" (in blue) to any HTML element:
  
  <blockquote class="hideable">... </blockquote>
  <div class="hideable">... </div>
  <code class="hideable">... </code>
  <ul class="hideable">... </ul>
  
  
• If you want to start out with the box hidden, add the class "hide" (in green):
  
  <blockquote class="hideable hide">... </blockquote>
  

• The hide/show box background can be changed in the CSS (in red)
  
  .hideable {background: #222222; padding:5px; }
  
  
• If you want to change or move the location of the image, change the URL in orange or the position by adjusting the numbers in red (em is based off the font size). The negative number moves the image left and up.
  
  
• Adjust the speed of the animation (in red) in the code. The number is the animation time in milliseconds: hideshowSpeed = 500;