JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<a class="head" href="#">Link 1<div class="plus"></div></a>
<ul>
<li><a href="#">Sublink 1</a></div></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
<li><a href="#">Sublink 4</a></li>
</ul>
<a class="head" href="#">Link 2<div class="plus"></div></a>
<ul>
<li><a href="#">Sublink 1</a></div></li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
<li><a href="#">Sublink 4</a></li>
</ul>
</nav>
CSS
nav a, nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 175px;
text-decoration: none;
background: #50BDE9;
margin-bottom: 5px;
border-radius: .5em;
font-size: 14px;
color: black;l
}
nav a:hover{
background-color: #86D5F4;
}
nav .head .minus{
float: right;
background-color: white;
padding: 5px 5px 0 0;
width: 11px;
height: 11px;
}
nav .head .plus{
float: right;
background-color: black;
padding: 5px 5px 0 0;
width: 11px;
height: 11px;
}
nav .logout:link, nav .logout:visited {
background-color: #F75543;
}
nav .logout:hover {
background-color: #FF5647;
}
nav .green:link, nav .green:visited {
background-color: #B8CD44;
}
.sidebar1 nav .green:hover {
background-color: #DCF453;
}
ul {
display: none;
list-style: none;
}
ul li {
/* border-bottom: 1px solid #666; /* this creates the button separation */
}
ul a, nav ul a:visited {
background-color: transparent; /* Remove */
border-radius: 0; /* Remove */
color: #000;
border-bottom: dotted 1px #999;
}
ul a:hover, nav ul a:active, nav ul a:focus {
background: #86D5F4;
color: #FFF;
}
JavaScript
$('nav .head').click(function() {
$(this).next().toggle('slow');
return false;
}).next().hide();
$("nav .head").toggle(
function() {
$(this).find("div").removeClass("plus").addClass("minus");
}, function () {
$(this).find("div").removeClass("minus").addClass("plus");
}
);