Как скрыть все блоки при выборе одного?

Question

[Nicknick1]

HTML

<div class="body_s24_nav_tabs"> <!--Навигационный список-->
           <a href="#s24_sub_container_aaa" class="body_s24_nav_link_aaa">AAA</a>
            <a href="#s24_sub_container_bbb" class="body_s24_nav_link_bbb">BBB</a>
            <a href="#s24_sub_container_ccc" class="body_s24_nav_link_ccc">CCC</a>
        </div>
    </div>
<div class="s24_sub_container">
            <div class="s24_sub_container_aaa" id="s24h_sub_container_aaa">
               <a href="#s24_popup_aaa_1_container" class="s24_aaa_link">Lorem ip I ipsum Lm Lorem</a>
               <a href="#s24_popup_aaa_2_container" class="s24_aaa_link">Lorem ip I ipsum Lm Lorem</a>
            </div>
            <div class="s24_sub_container_bbb" id="s24_sub_container_bbb">
            <a href="#s24_popup_bbb_1_container" class="s24_bbb_link">111Lorem ip I ipsum Lm Lorem</a>
            <a href="#s24_popup_bbb_2_container" class="s24_bbb_link">111Lorem ip I ipsum Lm Lorem</a>
         </div>
            <div class="s24_sub_container_ccc" id="s24_sub_container_ccc">
            <a href="#s24_popup_ccc_1_container" class="s24_ccc_link">111Lorem ip I ipsum Lm Lorem</a>
            <a href="#s24_popup_ccc_2_container" class="s24_ccc_link">111Lorem ip I ipsum Lm Lorem</a>
         </div>
        </div>

Не получается настроить следующий скрипт:

document.querySelector(".body_s24h_nav_link_aaa").addEventListener("click",function(e) {
    let tgt = e.target;
    if (tgt.matches(".s24_sub_container_aaa")) tgt("Все блоки в родителе").style.display="none";
  })

Например, необходимо скрыть s24_sub_container_bbb и s24_sub_container_ccc при выборе s24_sub_container_aaa

Comments

[Одиночка Айс]

1. Выбрать по data параметру тот, что нужно открыть
2. Закрыть все
3. Открыть тот, что выбрали в п.1

Answer 1

[Dino Winchester]

.tabs-panels__panel {
     display: none;
}

.tabs-panels__panel-active {
     display: block;
}

<div id="tabs" class="tabs">
    <div class="tabs__nav">
        <button class="tabs-nav__button tabs-nav__button-active" data-tabs-target="tabs-panel-1">
            Section 1
        </button>
        <button class="tabs-nav__button" data-tabs-target="tabs-panel-2">
            Section 2
        </button>
    </div>
    <div class="tabs__panels">
        <div id="tabs-panel-1" class="tabs-panels__panel">
            <div class="tabs-panels-panel__container">
                Content Of Section 1
            </div>
        </div>
        <div id="tabs-panel-2" class="tabs-panels__panel tabs-panels__panel-active">
            <div class="tabs-panels-panel__container">
                Content Of Section 2
            </div>
        </div>
    </div>
</div>

const container = document.querySelector("#tabs");

container.addEventListener("click", ({ target: t }) => {
     if (t.classList.contains("tabs-nav__button")) {
          const tabsTriggerButton = container.querySelectorAll(".tabs-nav__button");
          const tabsContentPanels = container.querySelectorAll(".tabs-panels__panel");

          const currentPanelID = t.dataset.tabsTarget;

          if (!currentPanelID) return;

          tabsTriggerButton.forEach(v => v.classList.remove("tabs-nav__button-active"));
          t.classList.add("tabs-nav__button-active");

          tabsContentPanels.forEach(v => {
               v.id === currentPanelID ?
                    v.classList.add("tabs-panels__panel-active") :
                    v.classList.remove("tabs-panels__panel-active");
          });
     }
});