Accordion Menu

Dieses Menü lässt sich durch eine Interation (Klick) öffnen und schließen. Anders als ein eines CSS Menü bleibt dieses auch nach verlassen offen. Dazu ist etwas jquery nötig.

Im Prinzip funktioniert es folgender maßen. Sobald ein Event (klick) auf das Element js-tu-accordion-toggle ausgeführt wird, schaut man ob der container, in dem Fall tu-accordion__group, die Klasse tu-accordion__group--open besitz. Falls dies nicht der Fall ist, wird die Klasse gesetzt und der Inhalt im Element tu-accordion-menu mit jquery und der funktion slideDown annimiert geöffet. Sollte es die Klasse besitzen wird es mit slideUp wieder geschlossen.

Vor dem öffnen eines Menüs kann im HTML noch nach der Klasse tu-accordion__group--open gesucht werden. Sollte sie existieren - also ein Menüpunkt ist bereits geöffnet - wird dieser geschlossen und der neue geöffnet. Dies geschieht zeitgleich.

Falls das Menü beim laden der Seite geöffnet sein soll, müsst ihr die Klasse tu-accordion__group--open in eurem Menü setzen und das Menu tu-accordion-menu mit style="display: block" öffnen. Allternativ könnt ihr nur die open Klasse setzten und der jquery Code der bei Window load gefeuert wird öffnet es automatisch. Diese Lösung finde ich allerdings nicht schön, da es immer etwas dauert bis jquery geladen und der Code ausgeführt wird.

Der HTML Code

<div class="tu-accordion">
    <div class="tu-accordion__group tu-accordion__group--open">
        <span class="tu-accordion-group__title js-tu-accordion-toggle">Menu</span>

        <div class="tu-accordion-menu">
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
        </div>
    </div>  
    <div class="tu-accordion__group">
        <span class="tu-accordion-group__title js-tu-accordion-toggle">Menu</span>

        <div class="tu-accordion-menu">
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
        </div>
    </div>  
    <div class="tu-accordion__group">
        <span class="tu-accordion-group__title js-tu-accordion-toggle">Menu</span>

        <div class="tu-accordion-menu">
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
            <div class="tu-accordion-meenu__item">
                <a href="#">Submenu</a>
            </div>
        </div>
    </div>  
</div>

Der CSS Code

.tu-accordion{
    width: 200px;
    line-height: 1;
}    

.tu-accordion-group__title {
    cursor: pointer; 
    display: block; 
    background: #c8c8c8;
    font-size: 20px;
    padding: 10px;
}

.tu-accordion-menu{
    display: none;
}

.tu-accordion-meenu__item a{
    display: block;
    background: #434343;
    padding: 5px 10px;
}

.tu-accordion-meenu__item a:hover{
    color: #fff;
}

jQuery Code

$(document).on('click', '.js-tu-accordion-toggle', function(){
    let autoCloseOther = true,
        speed = 300,
        container = $(this).closest('.tu-accordion__group')
        accordion = container.find('.tu-accordion-menu');

    if(container.hasClass('tu-accordion__group--open')){
        
        container.removeClass('tu-accordion__group--open');
        accordion.slideUp(speed);

    }else{

        let other = $('.tu-accordion__group--open');
        if(other.length && autoCloseOther){
            other.removeClass('tu-accordion__group--open');
            other.find('.tu-accordion-menu').slideUp(speed);
        }

        container.addClass('tu-accordion__group--open');
        accordion.slideDown(speed);
    }
});

$(window).on('load', function(){
    let activeMenu = $('.tu-accordion__group--open');

    if(activeMenu.length){
        activeMenu.find('.tu-accordion-menu').show();
    }
});