JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<ul id="navigation">
    <li id="m_li">
         <div><span>+</span><a href="#" >myself</a></div>
        <ul class="test" id="x_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Audio</a>
            </li>
        </ul>
    </li>
    <li id="profile_modeling_li">
        <div><span>+</span><a href="#" >friend</a></div>
        <ul class="test" id="y_ul">
            <li id="li">
                <a href="#" >Pictures</a>
            </li>
            <li id="li">
                <a href="#" >Video</a>
            </li>
        </ul>
    </li>
</ul>

CSS

* {

    padding: 1rem;

}

li {
    margin-bottom: 1rem;
}

JavaScript

$("#navigation > li > div > span").click(function(){

        alert('clicked');
    if(true == $(this).parent().next('ul').is(':visible')) {
        $('#accordion ul').slideUp(300);
        alert('clicked');
    }
    $(this).parent().next('ul').slideToggle(300);
});