<div class="column">
<div class="top">
<div class="items">
<div data-id="1" class="button">КЛИК</div>
</div>
</div>
<div data-id="1" class="bottom">
КОНТЕНТ1
</div>
</div>
<div class="column">
<div class="top">
<div class="items">
<div data-id="2" class="button">КЛИК</div>
</div>
</div>
<div data-id="2" class="bottom">
КОНТЕНТ2
</div>
</div>
.button{
cursor:pointer;
}
.bottom {
display: none;
background: grey;
}
.bottom._active {
display: flex;
}
document.addEventListener('click', evt => { // слушаем все клики
const shopBtn = evt.target.closest('div.button');
if (shopBtn) { // если клик внутри кнопки
const id = shopBtn.dataset.id;
const contentSelector = `div[data-id='${id}'].bottom`;
const contentBlock = document.querySelector(contentSelector); // ищем блок контента
contentBlock.classList.toggle('_active'); // ПЕРЕКЛЮЧАЕМ (toggle) ему класс
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.