JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
 <ul class='menu collapsible' id='menu'> 

                                   <li id="home" class="selected expand top"> 
                                        <a href="http://localhost//public_html/index.php/home">Home</a> 
                                   </li> 
                                   <li id="about_the_school" class="top"> 
                                        <a href="http://localhost//public_html/index.php/about_the_school">About the School<span>Click to expand</span></a> 
                                        <ul class='acitem'> 
                                             <li> 
                                                  <a href="http://localhost//public_html/index.php/about_the_school/welcome">Welcome</a> 
                                             </li> 

                                        </ul> 
                                   </li> 
                                   <li id="academic" class="top"> 
                                        <a href="http://localhost//public_html/index.php/academic">Academic<span>Click to expand</span></a> 
                                        <ul class='acitem collapsible'> 
                                             <li> 
                                                  <a href="http://localhost//public_html/index.php/academic/curriculum_&amp;_exam_system">Curriculum &amp; Exam System</a> 
                                             </li> 
                                             <li> 
                                                  <a href="http://localhost//public_html/index.php/academic/departments">Departments</a> 
                                                  <ul class='acitem menu collapsible'> 
                                                       <li> 
                                                            <a...

CSS

ul { padding-left: 20px; }

JavaScript

jQuery.fn.initMenu = function(){
    return this.each(function(){
        var theMenu = $(this).get(0);
        $('.acitem', this).hide();
        $('li.expand > .acitem', this).show();
        $('li.expand > .acitem', this).prev().addClass('active');
        $('li a', this).click(function(e){
            e.stopImmediatePropagation();
            var theElement = $(this).next();
            var parent = $(this).closest('ul');
            if (theElement.hasClass('acitem') && theElement.is(':visible')) {
                console.log(parent.html());
                 if (parent.hasClass('collapsible')) {
                        $('.acitem:visible', parent).first().slideUp('normal', function(){
                            $(this).prev().removeClass('active');
                        });
                        return false;
                    }
                    return false;
            }
            if (theElement.hasClass('acitem') && !theElement.is(':visible')) {

                //custom - adds class at beginning of expansion
                $(this).addClass('active');

                $('.acitem:visible', parent).first().slideUp('normal', function(){
                    $(this).prev().removeClass('active');
                });
                theElement.slideDown('normal', function(){
                      $(this).prev().addClass('active');
                 });
                return false;
             }
        });
    });
};
$(document).ready(function(){
    $('.menu').initMenu();
});