JSFiddle - React, Tailwind, and code Playground

by vol7ron

HTML

<ul id="main">
    <li class="head">Title Bar</li>
    <li class="item odd">
        <span class="text">A</span>
        <ul class="sub">
            <li>1</li>
            <li>2</li>
        </ul>
    </li>
    <li class="item even">
        <span class="text">B</span>
        <ul class="sub">
            <li>3</li>
            <li>4</li>
        </ul>
    </li>
    <li class="item odd">
        <span class="text">C</span>
        <ul class="sub">
            <li>5</li>
            <li>6</li>
        </ul>
    </li>
    <li class="item even">
        <span class="text">D</span>
        <ul class="sub">
            <li>7</li>
            <li>8</li>
        </ul>
    </li>
</ul>

CSS

/* colors used are not for production 
   only to enhance the example's 
   visual distinction */

#main{width:10em;}
.head,.item{border:1px solid black;padding:.5em;}
.head{font-weight:bold; background:#336; color:#fff; cursor:pointer;}
.item{background:#f90;}
.sub{display:none;}
.sub li{padding-left:1em;}
.text,.sub{cursor:pointer;}

JavaScript

$(document).ready(function(){
   // specific here because of other divs/list items
   $('#main li.item span.text').hover(function(){
      $(this).siblings().stop(true,true).toggle('slow');     
   });    
   
   $('li.head').hover(function(){
      $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
   });
});