JSFiddle - React, Tailwind, and code Playground

by Ketur Patel

HTML

<ul class ="m_nav_tier m_nav_tier1">
    <li data-nav-tier="1">
        <a class="m_drop" href="#">Link1</a>
            <ul class="m_nav_tier m_nav_tier2">
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
        </ul>
    </li>
</ul>

JavaScript

for (i = 9; i < mdrop.length; i++) {
        //Forward
        mdrop[i].onclick = function () {

            //make tier 1 inactive
            var tier1 = document.getElementsByClassName('m_nav_tier1')[1];
            tier1.className += " inactive";

            //find closest UL and make it active
            document.querySelector('ul .m_nav_tier2')[9].className += " active";
        };


        //change height of Tier 1 to same as tier 2
  
   
        //make tier 2 active
    }