Демо

Для размещения в нужный контейнер ставится данный код:

Код:
<div class="accordion">
<h3>Заголовок</h3>
<p>Ваш текст </p>
</div>

Далее стилизуем наш контейнер. В данном деле ваши возможности безграничны, все зависит от желания и умения.

Код:
<style type="text/css">

.accordion {
	width: 880px;
	border-bottom: solid 1px #c4c4c4;
margin-left: 20px;
}
.accordion h3 {
	background-color: #c2c2c2;
	padding: 7px 15px;
	margin: 0;
	font: bold 110% verdana, arial, helvetica, sans-serif;
	border: solid 1px #c4c4c4;
	border-bottom: none;
	cursor: pointer;
color: #111111
}
.accordion h3:hover {
	background-color: #e3e2e2;
}

.accordion p {  color: #2f2f2f;
	background-color: #8a8a8a;
background-image: url("…");  background-position: bottom right; background-repeat: no-repeat;
	margin: 0;
	padding:  10px 15px 20px;
	border-left: solid 1px #c4c4c4;
	border-right: solid 1px #c4c4c4;
}
</style>

Теперь – сам скрипт. Можно ставить два варианта, оба прекрасно работают; все зависит от Ваших нужд. В одном из них возможно открытие одновременно только одного раздела:

Код:
<script type="text/javascript"> 
$(document).ready(function(){
	
	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
    .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
	});

});
</script>

Во втором разделы остаются открытыми до тех пор, пока пользователь сам их не закроет.

Код:
<script type="text/javascript"> 
$(document).ready(function(){
	
	$(".accordion h3:first").addClass("active");
	$(".accordion p:not(:first)").hide();

	$(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
    $(this).toggleClass("active");
	});

});
</script>