закрытие всех dropdown при клике по одному из них

Question

задача следующая, при клике открывается меню под конкретной кнопкой, как сделать, чтобы когда нажимаешь на другую кнопку все остальные блоки закрывались? Так как сейчас можно нажать на первую, откроется первый блок и нажав на вторую кнопку второй откроется, но первый будет дальше открыт вот ссылка с примером https://jsfiddle.net/edich/4rfjw9tm/

   
  <div class="container">
    <div class="block">
      <div class="elem">
      <button class="btn"> elem one </button>
        <div class="info">
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        </ul>
    </div>
    </div>
    </div>
    <div class="block">
    <div class="elem">
      <button class="btn"> elem two </button>
      <div class="info">
        <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        </ul>
      </div>
    </div>
    </div>
    <div class="block">
    <div class="elem">
      <button class="btn"> elem three </button>
        <div class="info">
          <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          </ul>
        </div>
     
    </div>
    </div>
    </div>

.info{
    display:none
  }
.show{
    display:block
}

const buttons = document.querySelectorAll('.btn')
const info_elems = document.querySelectorAll('.info')
const elemets = document.querySelectorAll('.elem')

buttons.forEach((button)=>{
    button.addEventListener('click',()=>{
     button.parentNode.children[1].classList.toggle('show')
            
        
        })
    })

единственная просьба, на чистом JS дать подсказку, без JQuery

Answer 1

const buttons = document.querySelectorAll('.btn');

buttons.forEach((button, index) => {
  button.addEventListener('click', () => {
    const openedLists = document.querySelector('.show');
    if (openedLists) {
      openedLists.classList.toggle('show');
    }

    button.parentNode.children[1].classList.toggle('show');
  })
})

.info {
  display: none
}

.show {
  display: block
}

<div class="container">
  <div class="block">
    <div class="elem">
      <button class="btn"> elem one </button>
      <div class="info">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="elem">
      <button class="btn"> elem two </button>
      <div class="info">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="block">
    <div class="elem">
      <button class="btn"> elem three </button>
      <div class="info">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ul>
      </div>

    </div>
  </div>
</div>

БЛОГ НА HUSL

закрытие всех dropdown при клике по одному из них

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