JSFiddle - React, Tailwind, and code Playground

HTML

<div class="click">test1 click here</div>
<div id="toggle1" class="toggle">
    <ul>
        <li>li #1</li>        
    </ul>                                     
</div>
<div>bottom div</div>
<div class="click">test2 click here</div>
<div id="toggle2" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>        
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test3 click here</div>
<div id="toggle3" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>        
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test4 click here</div>
<div id="toggle4" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>        
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test5 click here</div>
<div id="toggle5" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>
        <li>li #5</li>        
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test6 click here</div>
<div id="toggle6" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>
        <li>li #5</li>
        <li>li #6</li>
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test7 click here</div>
<div id="toggle7" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>
        <li>li #5</li>
        <li>li #6</li>
        <li>li #7</li>
    </ul>                                    
</div>
<div>bottom div</div>
<div class="click">test8 click here</div>
<div id="toggle8" class="toggle">
    <ul>
        <li>li #1</li>
        <li>li #2</li>
        <li>li #3</li>
        <li>li #4</li>
        <li>li...

CSS

li {float: left;}
div.toggle {display: none;}
div#toggle1 li {width: 100%;}
div#toggle2 li {width: 50%;}
div#toggle3 li {width: 33%;}
div#toggle4 li {width: 25%;}
div#toggle5 li {width: 20%;}
div#toggle6 li {width: 16%;}
div#toggle7 li {width: 14%;}
div#toggle8 li {width: 12.5%;}
div#toggle9 li {width: 11%;}
div#toggle10 li {width: 10%;}
div#toggle11 li {width: 9%;}
div#toggle12 li {width: 8%;}

JavaScript

$('div.click').click(function () {
    $(this).next().slideToggle();                              
});