JSFiddle - React, Tailwind, and code Playground

by acturbo

HTML

<!---MENU--->
<ul class="accordion">
    <li class="item1"><a href="#">Product Category 1</a></li>
        <ul>
            <li class="sub1"><a href="#">Sub 1 </a></li>
        </ul>
 
</ul>


<!---HIDDEN DIVS--->

<div id='hidden_div' >
<img src="images/item1.png"/>hidden_div
</div>

<div id='hidden_div2' >
<img src="images/item1.png"/>hidden_div2
</div>

CSS

#hidden_div{
    background: red;
    display: none;
}
#hidden_div2{
    background: blue;
    display: none;
}

JavaScript

console.clear();
$(document).ready(function() {
    
    $('.item1').click(function() {
        $('#hidden_div').show();
        $('#hidden_div2').hide();
    });
    
    $('.sub1').click(function() {
        $('#hidden_div2').show();
        $('#hidden_div').hide();
    });

});