Click here

HTML

Toggle HeaderBLAH BLAH BLAH

CSS h2.trigger { padding: 0 0 0 50px; margin: 0 0 5px 0; background: url(h2_trigger_a.gif) no-repeat; height: 46px; line-height: 46px; width: 450px; font-size: 2em; font-weight: normal; float: left; } h2.trigger a { color: #fff; text-decoration: none; display: block; } h2.trigger a:hover { color: #ccc; } h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/ .toggle_container { margin: 0 0 5px; padding: 0; border-top: 1px solid #d6d6d6; background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top; overflow: hidden; font-size: 1.2em; width: 500px; clear: both; } .toggle_container .block { padding: 20px; /*--Padding of Container--*/ background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/ $(document).ready(function(){ //Hide (Collapse) the toggle containers on load $(".toggle_container").hide(); //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) $("h2.trigger").click(function(){ $(this).toggleClass("active").next().slideToggle("slow"); return false; //Prevent the browser jump to the link anchor });