JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<div class="content_nav">
    <ul>
        <li class="active" title="Top" data-number="0"></li>
        <li title="UCROO" data-number="1"></li>
        <li title="Your Classes" data-number="2"></li>
        <li title="Uni Connections" data-number="3"></li>
        <li title="Ratings" data-number="4"></li>
        <li title="Campus Feed" data-number="5"></li>
        <li title="Earn Points" data-number="6"></li>
        <!--for iphone--><!--<li title="#7"></li>-->
    </ul>
</div>


<div id="menu">
    <ul>
        <li><a href="" class="active">Home</a></li>
        <li id="about_link"><a href="javascript:void(0);" onclick="$(this).toggleClass('active');$('#about_menu').toggle();return false;">About</a>
            <ul id="about_menu">
                <li class="first"><a href="#" data-number="2">Classes</a></li>
                <li><a href="#" data-number="3">Connections</a></li>
                <li><a href="#" data-number="4">Ratings</a></li>
                <li><a href="#" data-number="5">Campus Feed</a></li>
                <li class="last"><a href="#" data-number="6">Points</a></li>
            </ul>
        </li>
        <li><a href="http://support.ucroo.com.au/blog" target="_blank">Blog</a></li>
        <li><a href="http://support.ucroo.com.au" target="_blank">Support</a></li>
        <li><a href="http://support.ucroo.com.au/contact-us/" target="_blank">Contact</a></li>
    </ul>
</div>

JavaScript

var listItems = $('.content_nav ul li'),
    aboutMenu = $('#about_menu'),
    // aboutLink = $('#about_link'),
    scrolling = false,
    isAtTheTop = false;

aboutMenu.on('click', 'a', function() {
    aboutMenu.toggle();
    // aboutLink.toggleClass('active');
    scrolling = true;
    listItems.removeClass('active');
    var num = $(this).data('number');

    $('.c' + num).ScrollTo(function() {
        scrolling = false;
    });
    listItems.filter(':data-number')

    return false;
});