JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="secondary-nav"><!--secondary-nav-->	
                <ul>
                   <li><a href="#.html">Current Article</a>
                        <ul>
                            <li><a href="#.html">Example 1</a></li>
                       </ul>
                    </li>
                    
                   <li><a href="#.html">Past Articles</a>
                        <ul>
                             <li><a href="pages.html">Example 1</a></li>
                           <li><a href="#.html">Example 2</a></li>
                           <li><a href="#.html">Example 3</a></li>
                      </ul>
                    </li>
                    <li><a href="#.html">Tradition</a>
                        <ul>
                             <li><a href="pages.html">Example 1</a></li>
                           <li><a href="#.html">Example 2</a></li>
                           <li><a href="#.html">Example 3</a></li>
                      </ul>
                    </li>
                </ul>   
            </div><!--/secondary-nav-->

CSS

/*secondary nav*/

#secondary-nav {
	float:left;
	height:auto;
	width:23%; /*210px*/
	position:relative;
   
}

/*heading styles*/
#secondary-nav ul li {
	padding: 0 10px;
	list-style-type: none;
   
}

#secondary-nav ul li a {
	font-family:TrajanPro;
	font-size:1em;
	line-height: 32px;
	color:#000;
}

/*links*/
#secondary-nav ul ul li a {
	display: block;
	font-family:TrajanPro;
	font-size:0.9em;
	line-height: 27px;
	text-decoration: none;
	color:#000;
   
	transition: all 0.15s;
}

#secondary-nav ul li a:hover {
	display:block;
	color:#af2931;
	text-decoration:underline;
}

/*hide the non active LIs by default*/
#secondary-nav ul ul {
	display: none;
}

#secondary-nav li.active ul {
	display: block;
}

#secondary-nav ul li {
white-space:nowrap;
}

JavaScript

$(document).ready(function(){
    $("#secondary-nav li").click(function(){
        //slide up all the link lists
        $(this).children('ul').slideToggle();
    })
});