SO - 29863845

by Arun P Johny

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="my-menu well" id="pages">
    <header> Sites </header>
    <ul id="starter">
        <li>
            <span class="glyphicon glyphicon-record"></span> 
            <a href="?page=pages/About">About</a>
        </li>
        <li>
            <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
            <a href="?page=pages/courses">Courses</a>
            <ul> <!-- Ul to hide number 1 -->
                <li>
                    <span class="glyphicon ul-menu glyphicon-chevron-down"></span> 
                    <a href="?page=pages/courses/topic_1">Topic 1</a>
                    <ul> <!-- Ul to hide number 2 -->
                        <li>
                            <span class="glyphicon glyphicon-record"></span> 
                            <a href="?page=pages/courses/topic_1/sub_topic_1">Sub Topic 1</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span class="glyphicon glyphicon-record"></span> 
                    <a href="?page=pages/courses/topic_2">Topic 2</a>
                </li>
            </ul>
        </li>
        <li>
            <span class="glyphicon glyphicon-record"></span> 
            <a href="?page=pages/main">Main</a>
        </li>
    </ul>
</div>

JavaScript

$('.ul-menu').on("click", function () {
    var t = $(this);
    //toggle only the sibling ul and hide any child ul of the current submenu
    t.nextAll('ul').toggle().find('ul').hide();
    t.toggleClass('glyphicon-chevron-down glyphicon-chevron-right')
});

//Hiding function
$(document).ready(function () {
    $('.ul-menu').parent().find('ul').hide();
});