JSFiddle - React, Tailwind, and code Playground

HTML

<h2 class="widgettitle sbg_title">Categories</h2>
    <ul class="ecart_categories">
        <li><a class="heading" href="#">category1</a>
            <ul class="children">
                <li><a href="http://">sub-category</a></li>
                <li><a href="http://">sub-category</a>
                    <ul class="children">
                        <li><a href="http://">sub-sub-category</a></li>
                    </ul></li>
            </ul>
        </li>
        <li class="current">
        <a class="heading" href="#">category2</a>
            <ul class="children">
                <li><a href="http://">sub-category</a></li>
                <li><a href="http://">sub-category</a>
                    <ul class="children">
                        <li><a href="http://">sub-sub-category</a></li>
                    </ul></li>
            </ul>
        </li>
    </ul>

CSS

/*****Accordion Styles*****/
ul.ecart_categories, ul.ecart_categories ul { list-style: none; margin: 0; }
ul.ecart_categories { border-bottom: 1px solid #000E2E; }
ul.ecart_categories li { border: 1px solid #000E2E; border-bottom: none; }
ul.ecart_categories ul li { border: none; border-bottom: 1px solid #C2C8D1; color: #999; padding: 5px 10px; }
ul.ecart_categories ul li:last-child { border-bottom: none; }
ul.ecart_categories a.heading { 
    background: #F4FFF9;
    color: #999;
    display: block;
    font-size: 18px;
    line-height: 18px;
    padding: 10px 5px;
    text-decoration: none;
}
ul.ecart_categories a.heading:hover { background: #00B9D2; color: #fff; }
ul.ecart_categories li.ui-accordion-selected a.heading, ul.ecart_categories li.current a.heading { background: #025185; color: #fff; }
ul.ecart_categories li ul a { border-bottom: 1px solid #00B9D2; color: #025185; text-decoration: none; }
ul.ecart_categories li ul a:hover { border-bottom: none; }

JavaScript

$('ul.ecart_categories').accordion();