Íme egy újabb, látványosabb megoldás, az előző bejegyzés mintájára.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


	<div id="wrapper">
		<h1>.: jQuery demo :.</h1>
		<h2>elso cimsor</h2>
		<div class="content">
			<img src="1.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>masodik cimsor</h2>
		<div class="content">
			<img src="2.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>

		<h2>harmadik cimsor</h2>
		<div class="content">
			<img src="3.png" alt=""/>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate, quam eu lobortis malesuada, tortor sapien molestie ante, vel pulvinar mi tortor a nunc. Aliquam sollicitudin tortor et eros mattis lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada erat at arcu dapibus cursus. Fusce urna mi, congue quis egestas sit amet, scelerisque at turpis. Suspendisse potenti. Sed consectetur quam eu risus sodales placerat. Sed lectus nisi, fermentum sed porttitor quis, tempus eget dui. Duis condimentum posuere consectetur. Fusce vel enim felis, vel posuere orci. In non nibh risus, sit amet ultrices lacus.</p>
		</div>
	</div>

CSS forráskód


* {
	padding: 0;
	margin: 0;
	border: 0
}
body {
	background: #2f2333;
	margin: 20px;
	font-family: arial;
	font-size: 12px
}
div#wrapper {
	width: 400px;
	margin: 0 auto
}
div#wrapper h1 {
	font-size: 30px;
	margin: 50px 0 20px 0;
	text-align: center;
	color: #f5b431
}
div#wrapper h2 {
	background: url('arrow.png') no-repeat #c1cca0 right -45px;
	padding: 7px 10px;
	margin: 0 0 10px 0;
	font: bold 15px Arial, Helvetica, sans-serif;
	cursor: pointer;
	color: #737d56;
	border-radius: 10px
}
div#wrapper h2:hover {
	background-color: #737d56;
	color: #c1cca0
}
div#wrapper h2.active {
	background-position: right 5px
}
div#wrapper div.content {
	margin: 10px 0;
	border-radius: 10px;
	padding: 10px;
	display: none;
	background: #4e3e54;
	color: #beaec4
}
div#wrapper div.content p {
	line-height: 20px
}
div#wrapper div.content img {
	margin: 0 0 10px 0
}

jQuery forráskód


$(document).ready(function(){
	// az elso H2 tag-re rateszi az active class-t
	$("h2").eq(0).addClass("active");

	// megjeleniti az elso .content class-al ellatott DIV-et
	$(".content").eq(0).show();

	// kattintas valamelyik H2 tagen
	$("h2").click(function(){
		// megjeleniti a hozza tartozo DIV-et
		// valamint osszecsukja a megnyitottakat
		$(this).next(".content").slideToggle("slow").siblings(".content").slideUp("slow");
		// rateszi az active class-t
		$(this).toggleClass("active");
		// az osszes tobbi H2-rol leveszi az active class-t
		$(this).siblings("h2").removeClass("active");
	});
});