Hello everyone I need to use delegation, I'm still new to js, but I hope you can help me. There are 3 blocks, but when you click on 2, 1 opens, you need only 2 to open when you click on 2, and only 1 when you click on 1. Thank you!

let visible = document.querySelector('.card__block');
let unvisible = document.querySelector('.hidden__block');
const card = document.querySelector('.card');

function showHidden() {
  card.onclick = function() {
    card.classList.toggle('open');
    if (card.classList.contains('open')) {
      visible.style.display = 'none'
      unvisible.style.display = 'block'
    } else {
      visible.style.display = 'block'
      unvisible.style.display = 'none'
    }
  }
}

card.addEventListener('click', function(event) {
  if (event.target.closest('.card')) {
    showHidden();
  }
});

.card {
  display: flex;
}

.hidden__block {
  display: none;
}

.card__block {
  background-size: cover;
  width: 200px;
  height: 200px;
  background-color: #1E90FF;
  border-radius: 10px 10px;
  padding: 15px;
  margin-right: 30px;
}

.hidden__block {
  background-size: cover;
  width: 200px;
  height: 200px;
  background-color: #1E90FF;
  border-radius: 10px 10px;
  padding: 15px;
  margin-right: 30px;
}

<div >
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
</div>

I don't understand why this happens and only 1 block opens and this is 1

CodePudding user response：

This is delegation

You should not addeventlistener in the click

const card = document.querySelector('.card');

function showHidden(cardBlock) {
  cardBlock.classList.toggle('open');
  cardBlock.nextElementSibling.classList.toggle('hidden__block')
}

card.addEventListener('click', function(event) {
  const tgt = event.target.closest('.card__block')
  if (tgt) showHidden(tgt);
});

.card {
  display: flex;
}

.hidden__block {
  display: none;
}

.card__block {
  background-size: cover;
  width: 200px;
  height: 200px;
  background-color: #1E90FF;
  border-radius: 10px 10px;
  padding: 15px;
  margin-right: 30px;
}

.hidden__block {
  background-size: cover;
  width: 200px;
  height: 200px;
  background-color: #1E90FF;
  border-radius: 10px 10px;
  padding: 15px;
  margin-right: 30px;
}

<div >
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
  <div >
    <div >
      <h3 >Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      </h3>
    </div>
  </div>
  <div  style="border-radius: 0px 40px;">
    <div >
      <h3 >Подготовка в НИШ, БИЛ для 5 и 6 классов.</h3>
    </div>
  </div>
</div>