Het is altijd weer het wiel opnieuw uitvinden, een eenvoudige manier om via een klik op een element een ander element te tonen of te verbergen.

HTML

<h2 class="trigger"><a href="#">Open & Toe</a></h2>
<div class="toggle_container">
	<div class="block">
		<h3>Inhoud titel</h3>
		<!--Content-->
	</div>
</div>

Afbeeldingen

1. h2_trigger_a.gif (146)
2. toggle_block_stretch.gif (114)
3. toggle_block_btm.gif (98)

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;}
.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;
background: url(toggle_block_btm.gif) no-repeat left bottom;
}

Jquery/Javascript

<![CDATA[
$(document).ready(function(){
	//verstop de container
	$(".toggle_container").hide(); 

	//Verwissel 'open' en 'sluit' status
	$("h2.trigger").toggle(function(){
		$(this).addClass("active");
		}, function () {
		$(this).removeClass("active");
	});

	//Schuif op en neer als geklikt wordt
	$("h2.trigger").click(function(){
		$(this).next(".toggle_container").slideToggle("slow");
	});
});
]]>