Открыть закрыть секцию по клику, при этом закрыть другие если они открыты

Question

Подскажите, в меню при клике на пункт открывается блок с текстом, при повторном закрывается, так вот если этих пунктов несколько, при открытом одном пункте кликаю на другое, оно открывается, а первое закрывается.

Надеюсь не сильно мудрено написал

Answer 1

Это называется аккордеон (accordion) или collapsible:

const handleClick = event => {
  const divs = document.querySelectorAll("div")
  const target = event.target.nextElementSibling
  target.classList.toggle("hide")

  divs.forEach(item => {
    if (item !== target) {
      item.classList.add("hide")
    }
  })
}

document.querySelectorAll("button").forEach(item => {
  item.addEventListener("click", handleClick)
})

button {
  display: block;
}

.hide {
  display: none;
}

<button>Кнопка 1</button>
<div class="hide">Контент 1</div>
<button>Кнопка 2</button>
<div class="hide">Контент 2</div>
<button>Кнопка 3</button>
<div class="hide">Контент 3</div>

jQuery:

const handleClick = event => {
  const $target = $(event.target).next()
  $target.toggleClass("hide")
  $("div").each(function() {
    if ($(this)[0] !== $target[0]) {
      $(this).addClass("hide")
    }
  })
}

$("button").on("click", handleClick)

button {
  display: block;
}

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Кнопка 1</button>
<div class="hide">Контент 1</div>
<button>Кнопка 2</button>
<div class="hide">Контент 2</div>
<button>Кнопка 3</button>
<div class="hide">Контент 3</div>

БЛОГ НА HUSL

Открыть закрыть секцию по клику, при этом закрыть другие если они открыты

Ответы (1 шт):