Learning the basics of jQuery and the toggle effect, It's a hard time finding resources on how to switch the “open” and “close” graphic state. After reading a few tutorials and mix and matching techniques now it is able to achieve this effect.

 

Step1. Wireframe & Style

We start out with an h2 tag with a link as the “trigger” for our effect. Below our h2, we will have our container where we hold the content.
Note that we nest the container within another div. One of the main reasons I decided to do this was to prevent the padding from easing up and down during its action.

HTML

<h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
<div class="block">
<h3>Content Header</h3>
<!--Content-->
</div>
</div>

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--*/
}

Step2. Activating the Toggle with jQuery

jQuery
We will now activate this toggle effect with some simple jQuery.

$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container").hide();

//Switch the "Open" and "Close" state per click
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});

//Slide up and down on click
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow");
});

});

Conclusion

I am no jQuery master, so there may be an even shorter way of writing this up, but this does the trick for me. If any jQuery heads are out there still reading, please share some of your techniques and tips!

 

---

 

Resorce: sohtanaka.