JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<div class="menu">
    <div id="TopHmenuService"><a class="TopIndexHref">Услуги</a>

        <div id="TopHmenuServiceBl" class="MenuCont" style="display:none;">123</div>
    </div>
    <div id="TopHmenuShop"><a class="TopIndexHref">Магазин</a>

        <div id="TopHmenuShopBl" class="MenuCont" style="display:none;">
            <div id="TopHmenuShop1"><a class="TopIndexHref">Магазин1</a>

                <div id="TopHmenuShopBl1" class="MenuCont" style="display:none;">456</div>
            </div>
            <div id="TopHmenuShop2"><a class="TopIndexHref">Магазин2</a>

                <div id="TopHmenuShopBl2" class="MenuCont" style="display:none;">456</div>
                <div id="TopHmenuShopBl21" class="MenuCont" style="display:none;">1234</div>
            </div>
        </div>
    </div>
</div>

CSS

.menu div {
    margin-left: 5px;
}

JavaScript

$(function () {
    $('.menu').on('click', '.TopIndexHref', function () {
        // текущий раскрываем, если был свёрнут
        // или сворачиваем в ином случае        
        $(this).siblings('.MenuCont').stop().slideToggle(300).end()
            // сворачиваем все блоки, кроме текущего
            .parent().siblings().children('.MenuCont').stop().slideUp(300);
        return false;
    });
});