How do I add active class to div while class="btn-buy2 gecmis" is active?
I want to add to <div class="my-head-right-item1">
<div class="contact-box2 mb-4">
<div class="my-meeting-toptitle align-items-center">
<div class="my-meeting-head-left">
<a href="#anlik" class="btn-buy2 active">Anlık</a>
<a href="#gecmis" class="btn-buy2 gecmis">Geçmiş</a>
<a href="#kisisel" class="btn-buy2">Kişisel Oda</a>
</div>
<div class="my-meeting-head-right">
<div class="my-head-right-item1">
Takvimi Görüntüle
</div>
</div>
</div>
</div>To add a class to a a div containing both btn-buy2 and gecmis classes you can do
let elements = document.querySelectorAll('.btn-buy2').filter(item =>
return item.classList.indexOf('gecmis') > -1);
elements.forEach(el => el.classList.add('your-class-name-here'));
Hope that answers your question.
Here I add active using an eventListener and toggle active on the other div if gecmis is active
document.querySelector(".contact-box2").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("btn-buy2")) {
tgt.closest("div").querySelectorAll(".btn-buy2")
.forEach(btn => btn.classList.remove("active")); // remove active from siblings
tgt.classList.add("active");
tgt.closest(".my-meeting-toptitle")
.querySelector(".my-head-right-item1")
.classList.toggle("active",
tgt.classList.contains("gecmis") && tgt.classList.contains("active")
);
}
}).active {
background-color: yellow;
}<div class="contact-box2 mb-4">
<div class="my-meeting-toptitle align-items-center">
<div class="my-meeting-head-left">
<a href="#anlik" class="btn-buy2 active">Anlık</a>
<a href="#gecmis" class="btn-buy2 gecmis">Geçmiş</a>
<a href="#kisisel" class="btn-buy2">Kişisel Oda</a>
</div>
<div class="my-meeting-head-right">
<div class="my-head-right-item1">
Takvimi Görüntüle
</div>
</div>
</div>
</div>