javascript – Open close the section on click, while closing others if they are open

Question:

Tell me, in the menu, when you click on an item, a block with text opens, when you re-close it, so if there are several of these items, when one item is open, I click on another, it opens, and the first one closes.

I hope I didn't write too hard

Answer:

It's called accordion or 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>

Post Views: 0