JSFiddle - React, Tailwind, and code Playground

by inadcod

HTML

<ul id="menu">
             <li><a class="album" id="beauty-fashion" href="#">Beauty/Fashion</a>
                <ul>
                    <li><a href="#">Beauty 1</a></li>
                </ul>
             </li>             
             <li><a class="album" id="covers" href="#">Covers</a></li>
             <li><a class="album" id="editorial" href="#">Editorial</a></li>
             <li><a class="album" id="advertising" href="#">Advertising</a></li>
             <li><a class="album" id="fx" href="#">FX</a></li>
             <li><a class="album" id="portraits" href="#">Portraits</a></li>
             <li><a class="album" id="taly" href="#">Taly</a></li>
             <li><a class="disabled" href="#" id="previousImage">Previous</a></li>
             <li><a href="#" id="toggleAnimation">Pause</a></li>
             <li><a class="disabled" href="#" id="nextImage">Next</a></li>
</ul>

JavaScript

$(document).ready(function(){
        $("#menu>li>ul").hide();
        $("ul#menu>li>ul>li").click(function(){                     
            $(this).slideUp(1000).removeClass("current_submenu");     
        });
        $("ul#menu>li").hover(function(){                          
            $(this).find("ul").slideDown(1000).addClass("current_submenu");          
        }); 
});