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 class="active"><a href="#.html">Past Articles</a>
                            <ul>
                                 <li><a href="#.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 {
    	float:left;
    	height:auto;
    	width:23%; /*210px*/
    	border-right:2px solid #000;
    	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;
    }
    
    #secondary-nav ul ul {
    	display: none;
    }
    
    #secondary-nav li.active ul {
    	display: block;
    }

JavaScript

$(document).ready(function(){
    	$("#secondary-nav ul").click(function(){
    		//slide up all the link lists
    		$("#secondary-nav ul ul").slideToggle();
    		//slide down the link list below the h3 clicked - only if its closed
    		
    	})
    })