Menu accordéon (column count)

http://api.jqueryui.com/accordion/#option-header Il faut respecter la structure HTML pour l'utilisation du widget accordion de la librairie jQuery UI : 1. Élément de niveau 1 en ligne 2. Élément de niveau n+1 en colonne Contrainte : Générer le même nombre d'éléments par colonne.

by Guillaume Seguin

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="column-container" class="accordion">
    <a>box 1</a>
    <nav>
        <a>box 1.1</a>
        <a>box 1.2</a>
        <a>&nbsp;</a>
        <a>&nbsp;</a>
        <a>&nbsp;</a>
    </nav>
    <a>box 2</a>
    <nav>
        <a>box 2.1</a>
        <a>box 2.2</a>
        <a>box 2.3</a>
        <a>box 2.4</a>
        <a>box 2.5</a>
    </nav>
    <a>box 3</a>
    <nav>
        <a>box 3.1</a>
        <a>box 3.2</a>
        <a>&nbsp;</a>
        <a>&nbsp;</a>
        <a>&nbsp;</a>
    </nav>
</div>
<br>
<div id="column-container" class="accordion">
    <a>box 1</a>
    <nav>
        <a>box 1.1</a>
        <nav>
            <a>box 1.1.1</a>
                <nav>
                    <a>box 1.1.1.1</a>
                    <a>box 1.1.1.2</a>
                </nav>
            <a>box 1.1.2</a>
        </nav>
        <a>box 1.2</a>
        <nav></nav>
    </nav>
    <a>box 2</a>
    <nav>
        <a>box 2.1</a>
        <a>box 2.2</a>
        <a>box 2.3</a>
		<a>&nbsp;</a>
		<a>&nbsp;</a>
		<a>&nbsp;</a>
    </nav>
    <a>box 3</a>
    <nav>
        <a>box 3.1</a>
        <a>box 3.2</a>
		<a>&nbsp;</a>
		<a>&nbsp;</a>
		<a>&nbsp;</a>
		<a>&nbsp;</a>
    </nav>
</div>

CSS

div#column-container {   
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
    
}

div#column-container > a {
    background-color: orangered
}

div#column-container nav a {  
    display: block;
    background-color: greenyellow
}

JavaScript

$( ".accordion" ).accordion( { collapsible: true, active: false, heightStyle: "content", icons: false } );