JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="amenu">
<li><a href="#">Home</a>
<!--this level has no currentbranch1 so shouldnt slide down-->
<ul class="multilevel-linkul-0" title="">
<li><a href="#">Home sub 1</a></li>
<li><a href="#">Home sub 2</a></li>
</ul>
</li><li><span class="currentbranch0">
<a href="#">Content</a></span>
<!--this level has currentbranch1 so should slide down-->
<ul class="multilevel-linkul-0" title="">
<li><a href="#">Content 0</a></li>
<li><span class="currentbranch1"><a href="#">Content 3</a></span></li>
<li><a href="#">Content 1</a></li>
<li><a href="#">Content 2</a></li>
</ul>
</li>
</ul>
CSS
/**Accordian Navigation**/
#amenu {
font-family: 'Titillium Web', sans-serif;
float: left;
width: 240px;
list-style: none;
padding: 15px 25px 15px 25px;
}
#amenu li a {
display: block;
padding: 10px 15px;
font-weight: bold;
color: #A7A9AB;
font-size: 16px;
border-bottom: 1px solid #999;
text-decoration: none;
}
#amenu li a:hover, #amenu li a.active {
color: #004077;
text-decoration: none;
}
#amenu li ul {
display: none;
list-style: none;
}
#amenu li ul li a {
padding: 10px 10px 0 25px;
font-style: italics;
color: #A7A9AB;
font-weight: normal;
font-size: 15px;
border: none;
}
#amenu li ul li a:hover, #amenu li ul li a:active {
color: #76B72A;
}
JavaScript
//How to target this command to multilevel-linkul-0 class?
$(function(){
$('.currentbranch1').parents('ul.multilevel-linkul-0').slideDown();
});