Экспандер / jQuery Code Expander
XHTML 1.0 Strict / Valid
- 16.12.2008 -

                             

$("pre.sampleCode").each(function() { // find specific elements
	if ($(this).css("height") > 100) { // filter on CSS height > 100
		var _startHeight = parseInt($(this).css("height")); // store current height
		$(this).css("height", "100px")  // set height to 100px
			.wrap("<div>") // add a div to group new elements			
  		.parents("div") // Select previously added div
 				// add new child for clickable area
  			.append("<div class=\"ceexpand\">Expand Code</div>") 
  		.find("div.ceexpand") // select new child
  			.hover( // add a hover class
  				function() { $(this).toggleClass("cehover") },
  				function() { $(this).toggleClass("cehover") }
  			)
  			.toggle( // toggle the click action of the div
  				// Position Closed -> Open It
	  			function () { 
	  				// swap the class and change the HTML
	  				$(this).toggleClass("cecollapse").html("Collapse Code") 
	  					// select the pre and animate it open
	  					.siblings("pre").animate({height: _startHeight}); 
	  			},
  				// Position Open -> Close It
	  			function () { 
	  				// swap the class and change the html
	  				$(this).toggleClass("cecollapse").html("Expand Code") 
	  					// select the pre and animate it closed
	  					.siblings("pre").animate({height: 100}); 
	  			}
	  		);
	  }
  });

16. 12. 2008