I need to use delegation

Question

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;
}


  
    
      Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      
    
  
  
    
      Подготовка в НИШ, БИЛ для 5 и 6 классов.
    
  
  
    
      Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      
    
  
  
    
      Подготовка в НИШ, БИЛ для 5 и 6 классов.
    
  
  
    
      Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
      
    
  
  
    
      Подготовка в НИШ, БИЛ для 5 и 6 классов.

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

mplungjan · Answer

This is delegation

You should not addeventlistener in the click

I wrapped all cards in a container and the blocks in a card div

const cardContainer = document.getElementById('cardContainer');

function showHidden(card) {
  const cardBlock = card.querySelector('.card__block');
  const hiddenBlock = card.querySelector('.hidden__block');
  cardBlock.classList.toggle('hidden__block');
  cardBlock.classList.toggle('card__block');
  hiddenBlock.classList.toggle('hidden__block');
  hiddenBlock.classList.toggle('card__block');
}

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

#cardContainer {
  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;
}


  
    
      
        Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
        
      
    
    
      
        Подготовка в НИШ, БИЛ для 5 и 6 классов.
      
    
  
  
    
      
        Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
        
      
    
    
      
        Подготовка в НИШ, БИЛ для 5 и 6 классов.
      
    
  
  

    
      
        Ликвидация пробелов в знаниях учащихся с 5 по 11 класс
        
      
    
    
      
        Подготовка в НИШ, БИЛ для 5 и 6 классов.

I need to use delegation

1 Answers