JSFiddle - React, Tailwind, and code Playground

by yosafatade

HTML

<li id="tabs"><a href="#" id="tab" class="active" title="one">Sport</a>
<ul id="level1" class="one">
                    <li><a href="#">View All</a></li>
                    <li><a href="#" >Shoes</a></li>
                    <li><a href="#" >T-Shirt</a></li>
                    <li><a href="#" >Tools</a></li>
                    <li><a href="#" >Hats</a></li>
                    <li><a href="#">Pants</a></li>
                    </ul>


                </li>

                <li id="tabs"><a href="#" id="tab" class="tab" title="two">Foods</a>

                    <ul id="level1" class="two">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    </ul>


                </li>

JavaScript

$(document).ready(function() {
    $('ul#level1').slideUp();
    $('li#tabs').hover(function() {
        var content_show = $(this).children('a').attr('title');
        $('.' + content_show).stop().slideDown();

    }, function() {


        var content_show = $(this).children('a').attr('title');
        $('.' + content_show).stop().slideUp();


    });
});