Web Designing Tutorial - Learn HTML, CSS, Java Script, Flash Website Designing Tips: A Simple Toggle with CSS & jQuery

Sunday, March 29, 2009

A Simple Toggle with CSS & jQuery

I know that there are a lot of website is giving a toggle scripts (tutorials) but find that there are too hard to understand and edit.

After reading a few tutorials, I was able to achieve this effect, but i want to share with you.

Click here to view demo.

Step1. Style and wireframe

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"); });
});