Tutorial - jQuery toggle

toggle.css

/* Main toggle */
.toggle { 
	margin-bottom: 10px;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 5px;	
	font-size: 13px;
	line-height: 20px;
}

/* Toggle Link text */
.toggle a.toggle-trigger {
	position: relative;
	display: block;
	padding: 10px 20px 15px 20px;
	color: #666;
	text-decoration: none;
}

/* Toggle Link hover state */
.toggle a.toggle-trigger:hover {
	opacity: .8;
	text-decoration: none;
}

/* Toggle link when clicked */
.toggle a.active {
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 8px 6px -6px #ccc;
	color: #000;
	text-decoration: none;
}

/* Lets add a "-" before the toggle link */
.toggle a.toggle-trigger:before {
	content: "-";
	margin-right: 10px;
	font-size: 1.3em;	
}

/* When the toggle is active, change the "-" to a "+" */
.toggle a.active.toggle-trigger:before {
	content: "+";
}

/* The content of the toggle */
.toggle .toggle-content {
	padding: 10px 20px 15px 20px;
	color:#666;
}	

toggle.html

<!-- Toggle #1 -->
<div class="toggle">

	<!-- Toggle Link -->
	<a href="#" title="Title of Toggle" class="toggle-trigger">This is a title for my toggle</a>

	<!-- Toggle Content to display -->
	<div class="toggle-content">
		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
	</div><!-- .toggle-content (end) -->
</div><!-- .toggle (end) -->

<!-- Toggle #2 -->
<div class="toggle">

	<!-- Toggle Link -->
	<a href="#" title="Title of Toggle" class="toggle-trigger">This is my second toggle</a>

	<!-- Toggle Content to display -->
	<div class="toggle-content">
		<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
	</div><!-- .toggle-content (end) -->
</div><!-- .toggle (end) -->

toggle.js

jQuery(document).ready(function($) { 

    // Find the toggles and hide their content
    $('.toggle').each(function(){
        $(this).find('.toggle-content').hide();
    });

    // When a toggle is clicked (activated) show their content
    $('.toggle a.toggle-trigger').click(function(){
        var el = $(this), parent = el.closest('.toggle');

        if( el.hasClass('active') ) {
            parent.find('.toggle-content').slideToggle();
            el.removeClass('active');
        } else {
            parent.find('.toggle-content').slideToggle();
            el.addClass('active');
        }
        return false;
    });

});