How to Hide & Show Information

Show	Hide

• Link Example (click me)
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at ipsum. In sem sem, ultricies sit amet, pulvinar vitae, imperdiet eu, ligula. Phasellus nunc. Proin porttitor, tortor nec cursus sodales, felis ante tristique risus, in pulvinar eros nisi eget arcu. Praesent justo. Cras consectetuer, mauris et luctus condimentum, orci velit consectetuer tortor, quis vulputate sapien tellus eu justo. Suspendisse vulputate ullamcorper ligula. Aenean in lorem. Vivamus enim sem, adipiscing nec, malesuada at, aliquet ac, magna. Mauris imperdiet imperdiet lectus. Integer arcu metus, dapibus vel, faucibus nec, fringilla adipiscing, dolor. Sed id lectus eu ante mattis lacinia. Quisque in quam. Nunc porttitor congue lorem. Nulla ante ipsum, aliquam id, venenatis vehicula, mollis non, lectus. In purus. Nullam tempor. Phasellus nec arcu sit amet quam interdum ultricies.

• Image Example (click the image below)

<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 anything between the "</a>" and "<div class="hideBox hide">"
  
  
• If you want to start out with the box content showing, remove the class "hide".
  
  <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":
  
  <blockquote class="hideable hide">... </blockquote>
  

• The hide/show box background can be changed in the CSS (in red)
  
  .hideable {background: #222222;}
  
  
• 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;

<a class="hideLink" href="#">LINK TITLE</a>
<div class="hideBox hide">STUFF TO SHOW/HIDE</div>