JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<nav id="main-nav">
    <ul>
        <li>
            <a id='trigger'>#trigger</a>
            <ul id='menu-to-toggle' class='show'>
                <li>#menu-to-toggle</li>
                <li>blah blah</li>
            </ul>
        </li>
        <li>
            <a id='trigger2'>#trigger2</a>
            <ul id='menu2' class='hide'>
                <li>#menu2</li>
                <li>blah blah</li>
            </ul>
        </li>
        <li>
            <a id='trigger-three'>#trigger-three</a>
            <ul id='menu-three' class='show'>
                <li>#menu-three</li>
                <li>blah blah</li>
            </ul>
        </li>
    </ul>
</nav>
<hr>
<nav id="footer-nav">
    <ul>
        <li>
            <a>footer trigger</a>
            <ul class='show'>
                <li>blah blah</li>
            </ul>
        </li>
        <li>
            <a>footer trigger 2</a>
            <ul id='menu2' class='hide'>
                <li>blah blah</li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.hide {
    opacity: 0.2;
}
nav a {
    color: blue;
    cursor: pointer;
    display: inline-block;
    margin: 0 0.5em;
}
nav a:hover {
    text-decoration: underline;
}
}

JavaScript

// Define triggers as an object
var menuTriggers = [
    '#main-nav ul li a',
    '#footer-nav ul li a'
    // By adding more selectors to this array you could activate different menus without re-writing any code.
];

// Loop through triggers and set each one up
_(menuTriggers).each(function(triggerSelector) {
    // Attach a delegated event using jQuery#on()
    $(document.body).on('click', triggerSelector, function() {
        // Use jQuery#toggleClass to toggle the two classes
        $(this).siblings('ul').toggleClass('hide show');
    });
});