JSFiddle - React, Tailwind, and code Playground

by janwill

HTML

<div class="menu">
    <ul>
        <li><a>menu One</a></li>
        <li><a>menu Two</a></li>
        <li><a>menu Three</a></li>
    </ul>
</div>
<div class="content">
    <ul>
        <li>Content one
            <ul>
                <li>Content one one
                    <ul>
                        <li>Content one one one</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Content two
            <ul>
                <li>Content two two
                    <ul>
                        <li>Content two two two</li>
                    </ul>
                </li>
            </ul>
        </li>
          <li>Content three
            <ul>
                <li>Content three three
                    <ul>
                        <li>Content three three three</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

CSS

div div:nth-child(n+2) {
    display: none;
}

JavaScript

var menuItems = $("div:eq(0)").find("li");
var contents = $("div:eq(1)").find("div");

menuItems.on('click', function () {

	var index = menuItems.index( $(this) );
    showContent( index, true );

});

contents.on('click', function () {
    
    var index = contents.index( $(this) );
    showContent( index, true );
    
});

function showContent( index, allHide ) {
    
    if ( allHide )
    	contents.hide()
    
    contents.eq( index ).show();
    
}