Simple Slider-Pushover

Click me. (Not me.)
Expandable Content
Pushover Content
Click to expand

The following code is all the JavaScript that this widget needs.

(The Real magic is the CSS)

A jQuery developer should have no problem replacing the classic slow toggle with a custom animation.

function slider_pushover_initialize(){
	$(".slider_pushover_expandable_content").hide();
	$(".slider_pushover_click_to_expand .clickable").click(function(){
		$(this)
			.closest(".slider_pushover_left_container")
			.find(".slider_pushover_expandable_content")
			.toggle("slow");
	});
}	
					

This effect is actually very simple on the JavaScript side of things. For the exact JavaScript code, click the expandable content icon for this section.

The real magic is in the CSS. The outer wrapper of the entire widget has 'nowrap' for the whitespace property, and the two inner wrappers display as inline-block.

A few more details round out the effect. To view the exact CSS code with my notes, please click here.