JSFiddle - React, Tailwind, and code Playground

by akogch

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")
      .slideToggle(300)
      .end()
      // сворачиваем все блоки, кроме текущего
      .parent()
      .siblings()
      .find(".MenuCont")
      .slideUp(300)
    return false
  })
})