simple jquery for dynamic collapsible web page elements

gistfile1.txt

// an after-the-DOM is loaded wrapper,
// this makes designated elements slide up and disappear as soon as the page is visible,
// as well as holds conditional slide up/down logic for correctly configured content (see comments below):
$(function() {  
             
  // elements with a class of "content-hideable" have a "rel" attribute equal to the class of content
  // that should be 'hidden' or 'revealed' upon a mouse click, accomplished via an animated toggle: 
  
  // for each element with class "content-hideable":
  $('.content-hideable').each( function() {
                              
                              // This first clause causes all the elements to hide, since they appear
                              // upon page load as visible. This also hints to the user that there
                              // is content waiting to be viewed:
                              
                              // get its 'rel' attribute:
                              var rel = $(this).attr('rel');
                              if (rel) {
                                 // for every element of class with the name given by that rel, hide:
                                 $('.'+rel).animate( { opacity: "hide", height: "hide" }, 2000 );
                              }
                                
                              // attach a callback to toggle the class visibility:
                              $(this).click( function() {
                                               var rel = $(this).attr('rel');
                                               if ( rel ) {
                                                  $('.'+rel).animate( { opacity: "toggle", height: "toggle" }, 1000 );
                                               }  
                                               return false;
                                           });
                          });      
  
// this is the ending of the jquery wrapper insuring the DOM is loaded:
});