Rozbalovací menu ve stylu Akordeonu (neboli česky tahací harmoniky) je oblíbené a dá se najít v celé řadě grafických frameworků (například v jQuery UI).

Pokud ale nechcete načítat celý framework jen kvůli sbalovacímu menu, můžete si ho jednoduše napsat sami.

Stačí vytvořit seznam s odkazy a rozbalovacími panely:

<nav>
	<div id="navContainer" class="tabContainer">
		<ul>
			<li>
			<a href='' class='tabButton' data-openTab='1'>1</a>
			<div id="1">1
				<a href="" class="closeButton"> CLOSE </a>
			</div>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='2'>2</a>
			<div id="2" >2
				<a href="" class="closeButton"> CLOSE </a>
			</div>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='3'>3</a>
			<div id="3" > 3
				<a href="" class="closeButton"> CLOSE </a>
			</div>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='4'>4</a>
			<div id="4" >  4
				<a href="" class="closeButton"> CLOSE </a>
			</div>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='5'>5</a>
			<div id="5" >   5
				<a href="" class="closeButton"> CLOSE </a>
			</div>
			</li>
		</ul>
	</div>
</nav>

Pak doplnit JavaScript (nejlépe do jQuery.ready()), který bude jednotlivé panely otevírat a zavírat:

        document.menuIsOpen = false;
        $('.tabContainer div').hide();

        $('.tabButton').click(function(event) {
            var
                open = $("#" + $(this).attr('data-openTab')),
                isOpened = open.is('.opened');

            event.preventDefault();
            if (document.menuIsOpen) {
                document.menuIsOpen = false;
                $('.opened').hide("slow").removeClass('opened');
            }
            if (!isOpened) {
                document.menuIsOpen = true;
                open.addClass('opened').show("slow").css("display", "block");
            }
        });

        $('.closeButton').click(function(event) {
            event.preventDefault();
            $('.opened').hide("slow").removeClass('opened');
        });

Kód nejprve sbalí všechny panely a následně vytvoří handlery pro otevírací a zavírací (Close) odkazy. Po kliku na otevírací odkaz pak nejprve zjistí, jestli již není otevřen některý panel a pokud ano, tak ho nejprve zavře. Následně, pokud chce uživatel otevřít jiný než právě otevřený panel, tak ho otevře.

Pokud nechcete mít panely a otevírací odkazy v jednom, můžete je oddělit:

<nav>
	<div id="navContainer">
		<ul>
			<li>
			<a href='' class='tabButton' data-openTab='1'>1</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='2'>2</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='3'>3</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='4'>4</a>
			</li>
			<li>
			<a href='' class='tabButton' data-openTab='5'>5</a>
			</li>
		</ul>
	</div>
	<div id = "tabContainer" class="tabContainer">
		<div id="1">1
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="2" >2
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="3" > 3
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="4" >  4
			<a href="" class="closeButton"> CLOSE </a>
		</div>
		<div id="5" >   5
			<a href="" class="closeButton"> CLOSE </a>
		</div>
	</div>
</nav>

První sekce navContainer obsahuje otevírací odkazy, zatímco druhá tabContainer obsahuje otevírané panely. Díky propojení přes id mohou být umístěny kdekoliv na stránce – např. odkazy v horním menu (toolbar) a panely v po straně (sidebar).

Můžete se podívat na ukázku spojeného a odděleného akordeonu.