JSFiddle - React, Tailwind, and code Playground

by anpsmn

HTML

<ul class="nav nav-list">
    <li> <a href="#" data-toggle="collapse" data-target="#1-batteries">batteries&nbsp;</a>

        <ul class="subnav collapse" id="1-batteries">
            <li><a href="/collections/household-batteries" title="">household batteries</a>

            </li>
        </ul>
    </li>
    <li> <a href="#" data-toggle="collapse" data-target="#1-otc-medicines">otc medicines&nbsp;</a>

        <ul class="subnav collapse" id="1-otc-medicines">
            <li><a href="/collections/boxed-medicine" title="">boxed medicines</a>

            </li>
            <li><a href="/collections/childrens-medication" title="">children's medication</a>

            </li>
            <li><a href="/collections/cough-cold-allergy-sinus" title="">cough,cold,allergy &amp; sinus</a>

            </li>
            <li><a href="/collections/pain-relief-medicine" title="">pain relief medicine</a>

            </li>
            <li><a href="/collections/rubs-ointments" title="">rubs &amp; ointments</a>

            </li>
            <li><a href="/collections/stomach-relief" title="">stomach relief</a>

            </li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function () {
    $('.collapse').on('show.bs.collapse', function () {
        $('.collapse.in').collapse('hide');
    })
})