JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id="ss-page-list">
    <ul>
        <li>
            <div> <a href="#" class="sortable"><i>#</i></a>
 <a href="#" class="expand"><i>+</i></a> Home <span class="opts">
                   <ul>
                       <li><a href="#">A</a></li>
                       <li><a href="#">B</a></li>
                       <li><a href="#">C</a></li>
                   </ul>
               </span>

            </div>
            <ul class="submenu">
                <li>
                    <div><a href="#" class="sortable"><i>#</i></a> Sub Home 1</div>
                </li>
            </ul>
        </li>
        <li>
            <div> <a href="#" class="sortable"><i>#</i></a>
 <a href="#" class="expand"><i>+</i></a> About Us</div>
            <ul class="submenu sub-menu-1">
                <li>
                    <div><a href="#" class="sortable"><i>#</i></a> Sub About 1</div>
                </li>
                <li>
                    <div> <a href="#" class="sortable"><i>#</i></a>
 <a href="#" class="expand"><i>+</i> </a>
Sub About 2</div>
                    <ul class="submenu submenu-2">
                        <li>
                            <div><a href="#" class="sortable"><i>#</i></a> Sub Sub About 1</div>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#ss-page-list {
    width:400px;
}
#ss-page-list a {
    color:#fff;
    text-decoration:none
}
#ss-page-list ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#ss-page-list ul li div {
    background-color: #777;
    border-bottom: 1px solid #444;
    line-height: 1em;
    color: #fff;
    padding: 5px 10px;
}
#ss-page-list .submenu {
    display: none;
}
#ss-page-list > ul > li > ul > li > div {
    padding-left: 25px;
}
#ss-page-list > ul > li > ul > li > ul > li > div {
    padding-left: 40px;
}
#ss-page-list .opts {
    float:right
}
#ss-page-list .opts > ul > li {
    display:inline-block;
}
#ss-page-list .opts > ul > li > a {
    padding:0 2px;
    background-color:rgba(255, 255, 255, 0.3);
}

JavaScript

$(function () {

    $('#ss-page-list .expand').click(function () {
        var submenu = $(this).parent().next('.submenu');
        if ( !submenu.hasClass('submenu-2') ) {
            $('#ss-page-list > ul > li > .submenu').hide();
        }
        
        if ( !submenu.hasClass('submenu-1') ) {
            $('#ss-page-list .submenu-2').hide();
        }
        
        submenu.toggle();
        return false;
    });

    $('#ss-page-list ul').sortable({
        handle: '.sortable',
        containment: 'parent'
    });

});