S html kodo nisem hotel preveč komplicirati (da bi na primer dodal vsak del span+div še v svoj div).

[html]
<div class="accordion">
<span>Lorem ipsum dolor.</span>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam accusantium assumenda veritatis sequi molestias maiores quidem nesciunt cum ullam vero.</div>

<span>Quibusdam vitae autem.</span>
<div>Perspiciatis ipsum iusto libero totam itaque exercitationem explicabo sint. Obcaecati cum quas dignissimos dolorem maxime quaerat iure earum recusandae veritatis?</div>

<span>Adipisci laudantium dolore!</span>
<div>Suscipit provident eaque architecto dignissimos aliquam aspernatur error nostrum temporibus explicabo nam nihil distinctio quo quidem nesciunt labore harum totam.</div>

<span>Ipsam voluptatum quas.</span>
<div>Placeat aspernatur cupiditate doloremque minima necessitatibus corrupti natus culpa adipisci atque qui excepturi quis explicabo non veritatis dolores quam velit.</div>

<span>Nemo esse ea.</span>
<div>Assumenda sunt earum voluptates quo sit illo aspernatur voluptatum accusamus minus quos enim quam nesciunt incidunt esse quas rerum ex.</div>
</div>
[/html]

Pri oblikovanju zgornje kode v CSS sem mogoče malo kompliciral, ko sem za del menija dodelil drugačno barvo ozadja. Omeniti velja še, da sem že takoj na začetku skril vse dive, ki se ob kliku na stvar seznama razširjajo ali skrivajo.

[css]
* { margin: 0; padding: 0; }
.accordion {
width:250px;
display: block;
font-family: Georgia, serif;
margin: 20px auto;
}
.accordion span {
font-size: 18px;
padding:10px 5px;
display: block;
}
.accordion span:nth-of-type(1), .accordion div:nth-of-type(1) { background-color:#003056; }
.accordion span:nth-of-type(2), .accordion div:nth-of-type(2) { background-color:#04518C; }
.accordion span:nth-of-type(3), .accordion div:nth-of-type(3) { background-color:#00A1D9; }
.accordion span:nth-of-type(4), .accordion div:nth-of-type(4) { background-color:#47D9BF; }
.accordion span:nth-of-type(5), .accordion div:nth-of-type(5) { background-color:#F2D03B; }

.accordion div {
display: none;
padding: 5px;
}
[/css]

Spodnja koda v javascriptu z jQueryjem naredi, da ob kliku stvari seznama (span) z efektom drsenja skrije vse dive in prikaže div, ki se nahaja direktno pod klikanim span-om. Seveda pa se procedure izvede le, če klikani span nima že odprt div, ki se nahaja pod njim (ker izgleda neumno odpirati nekaj, kar je že odprto).

[javascript]
$(function(){
var $divs = $(".accordion div");
$("span").click(function(){
if(!$(this).next().is(":visible")) {
$divs.slideUp();
$(this).next().slideDown();
}
});
});
[/javascript]

Končni izdelek lahko vidite tukaj: KLIK