<div class="block-tabs-main-home__column">
<div data-content-id="1" class="block-tabs-main-home__item">
<span>Клик</span>
</div>
</div>
<div data-id="1" class="fits-cars-showmore-content">
<div class="block-tabs-main-home__item">
<span>Контент</span>
</div>
</div>
<div class="block-tabs-main-home__column">
<div data-content-id="2" class="block-tabs-main-home__item">
<span>Клик</span>
</div>
</div>
<div data-id="2" class="fits-cars-showmore-content">
<div class="block-tabs-main-home__item">
<span>Контент</span>
</div>
</div>
.fits-cars-showmore-content{
display: none;
}
.fits-cars-showmore-content_active{
display: block;
}
.block-tabs-main-home__column{
cursor:pointer;
font-size:30px;
color:red;
}
const autoBtns = document.querySelectorAll('.block-tabs-main-home__item');
autoBtns.forEach(
btn => {
btn.addEventListener("click", (e) => {
const contentId = btn.getAttribute("data-content-id");
document
.querySelectorAll(`[data-id="${contentId}"], .fits-cars-showmore-content_active`)
.forEach( (el) =>
el.classList.toggle('fits-cars-showmore-content_active')
)
}
);
}
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.