Menu accordéon ( sans jQuery UI )

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 : marche pô

by Guillaume Seguin

HTML

<div id="column-container">
    <a>Niveaux</a>
    <a>Catégorie</a>
    <a>Recherche</a>
    <nav id="Niveaux">
        <a>box 1.1</a>
        <a>box 1.2</a>
    </nav>
    <nav id="Catégorie">
        <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>
    <nav id="Recherche">
        <a>box 3.1</a>
        <a>box 3.2</a>
    </nav>
</div>
<br>
<div id="column-container" class="accordion">
    <a>Niveaux2</a>
    <a>Catégorie2</a>
    <a>Recherche2</a>
    <nav id="Niveaux2">
        <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>
    <nav id="Catégorie2">
        <a>box 2.1</a>
        <a>box 2.2</a>
        <a>box 2.3</a>
    </nav>
    <nav id="Recherche2">
        <a>box 3.1</a>
        <a>box 3.2</a>
    </nav>
</div>

CSS

div#column-container {
    
}

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

div#column-container > nav {
}


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

JavaScript

$("#column-container > nav").hide();
$("#column-container > a").click(function(){
    $(this).siblings("nav").not("#"+$(this).text()).hide();
    $("#"+$(this).text()).toggle();
});