$(document).ready(function() {
$(".togglebox").hide(); /* hide all items of class "togglebox" */
$(".show").show(); /* then show any that also have class "show" */

$(".toggle").addClass("toggleOff");  /* adds class "toggleOff" to ALL toggles (temporarily -- it will only STAY */
												  /* on items that toggle a single block on and off) */
$(".expand").addClass("toggleOff");  /* adds class "toggleOff" to ALL expand-only toggles. */
$(".toggle[@rev]").removeClass("toggleOff").addClass("toggleOne"); /* REMOVES "toggleOff" class from items that are */
																								 /* toggling BETWEEN two blocks; then adds class   */ 
																								 /* "toggleOne" to those items. */

	$(".toggle").not("label").click(function() {
	var rl = this.getAttribute("rel");
	var rv = this.getAttribute("rev");

	$(".togglebox").each(function(i) {
		if (this.getAttribute('id') == rl)
		$(this).toggle();
		if (this.getAttribute('id') == rv)
		$(this).toggle();
		}); 
		
	$(".toggle").each(function(i) {
		if(!rv) {
		if (this.getAttribute('rel') == rl) {
		$(this).toggleClass("toggleOn");
		$(this).toggleClass("toggleOff");
		};
		};
    if(rv) {
	if (this.getAttribute('rel') == rl) {
		$(this).toggleClass("toggleOne");
		$(this).toggleClass("toggleTwo"); 
		};
		};
	});
	
	});
		
		
	$(".expand").click(function() {
		$(this).addClass("toggleOn");
		$(this).removeClass("toggleOff");
		var rl = this.getAttribute("rel");
		var rv = this.getAttribute("rev");
		$(".togglebox").each(function(i) {
			if (this.getAttribute('id') == rl)
			$(this).show();
			if (this.getAttribute('id') == rv)
			$(this).hide();
			});
		$(".expand").each(function(i) {
			if (this.getAttribute('rel') == rl) {
				$(this).addClass("toggleOn");
				$(this).removeClass("toggleOff");
				};
			if (this.getAttribute('rev') == rv) {
				$(this).addClass("toggleOff");
				$(this).removeClass("toggleOn");
				};
			});
	});
	
	$(".contract").click(function() {
		var rl = this.getAttribute("rel");
		var rv = this.getAttribute("rev");
		$(".togglebox").each(function(i) {
		if (this.getAttribute('id') == rl)
			$(this).hide();
			if (this.getAttribute('id') == rv)
			$(this).show();
		});
		$(".contract").each(function(i) {
			if (this.getAttribute('rel') == rl) {
				$(this).addClass("toggleOff");
				$(this).removeClass("toggleOn");
				};
			if (this.getAttribute('rev') == rv) {
				$(this).addClass("toggleOn");
				$(this).removeClass("toggleOff");
				};
			});
		});
	
});

/* USAGE: 

   First, INCLUDE jquery.js BEFORE this file!
   Now give your toggle control item a class of "toggle", and a rel of the ID that you want toggled.
   If you want one box shown and one hidden, use rel="id" for the box to be SHOWN, and rev="id" for the
   box to be HIDDEN.
   Then give the boxes you want toggled a class of "togglebox" and the matching IDs.
   
   Example:
   
   <a class=”toggle” rel=”theIDtotoggle”>Toggle something</a>
	 <div id=”theIDtotoggle” class=”togglebox”>The ID being toggled.</div>

	 (To get VALID code, your "toggle" element must be an <a>, since "rel" and "rev" are valid attributes
	 only for <a>. Otherwise? Really doesn't matter; they won't HURT anything.)
	 
  If you need any of the toggleboxes SHOWING on pageload instead of hidden, give them a second class of “show”. 
  (If showing one box and hiding another, you’ll obviously want to do this!)

Example:

   <h3 class=”toggle” rel=”theIDtotoggle” rev=”initialShow”>Toggle something</h3>
	 <div id=”theIDtotoggle” class=”togglebox”>The ID being toggled.</div>
	 <div id=”initialShow” class=”togglebox show”>This DIV is initally shown; it will toggle to hidden!</div>


*/