JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="section_1" class="section active_section">
    <li><span class="section_title active_section_title" id="section_title_1"><a id="section_link_1" href="#">Home</a></span>

        <ul style="display: none;"></ul>
    </li>
</ul>
<ul id="section_4" class="section">
    <li><span class="section_title" id="section_title_4"><a id="section_link_4" href="#">About</a></span>

        <ul style="display: none;"></ul>
    </li>
</ul>
<ul id="section_2" class="section">
    <li><span class="section_title" id="section_title_2"><a id="section_link_2" href="#">Lines</a></span>

        <ul style="display: none;">
            <li class="exhibit_title" id="exhibit_12"><a href="#">wellWE</a>

            </li>
            <li class="exhibit_title" id="exhibit_11"><a href="http://localhost/apparel/index.php/license/-marvel/">Arrival</a>

            </li>
            <li class="exhibit_title" id="exhibit_10"><a href="#">Star Home</a>

            </li>
        </ul>
    </li>
</ul>
<ul id="section_3" class="section">
    <li><span class="section_title" id="section_title_3"><a id="section_link_3" href="#">Private homeland</a></span>

        <ul style="display: none;">
            <li class="exhibit_title" id="exhibit_13"><a href="#">ttW 15-16</a>

            </li>
            <li class="exhibit_title" id="exhibit_14"><a href="#">ghy15</a>

            </li>
        </ul>
    </li>
</ul>
<ul id="section_5" class="section">
    <li><span class="section_title" id="section_title_5"><a id="section_link_5" href="#">contact</a></span>

        <ul style="display: none;"></ul>
    </li>
</ul>

CSS

ul ul {
    display: none;
}

JavaScript

$(document).ready(function () {
    $('ul li span.section_title > a').click(function (e) {
        e.preventDefault();
        $('ul ul').hide('slow');
        $(this).closest('li').find('ul').toggle('slow');
    });
});