JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
    <ul id='nav'>
        <li>Start</li>
        <li class='accordion'>Basics
            <ul>
                <li class="level_2">Installation</li>
                <li>Syntax</li>
                <li>Selektoren</li>
                <li>Events und Ereignisse</li>
                <li>Zusammenfassung</li>
            </ul>
        </li>
        <li class='accordion'>Effekte
            <ul>
                <li>Hide und Show</li>
                <li>Fade</li>
                <li>Slide</li>
                <li>Animate</li>
                <li>Stop</li>
                <li>Callback</li>
                <li>Chaining</li>
            </ul>
        </li>
        <li class='accordion'>HTML
            <ul>
                <li>Holen und Setzen</li>
                <li>Neuer Inhalt</li>
                <li>Inhalt Entfernen</li>
                <li>Holen und Setzen von CSS-Klassen</li>
                <li>CSS-Methoden</li>
                <li>Dimensionierung</li>
            </ul>
        </li>
        <li class='accordion'>Traversing
            <ul>
                <li>Hoch</li>
                <li>Runter</li>
                <li>Seitwärts</li>
                <li>Filtern</li>
            </ul>
        </li>
    </ul>
</div>

JavaScript

$("#nav li li").addClass("closed").hide();
$('.accordion').click(function(e){
 if(e.target !== this)  return;
 if($(this).find('li.open').length>0) 
    $(this).find('li').removeClass('open').slideUp();   
 else
    $(this).find('li').addClass('open').slideDown();
})