En el código a continuación, elimino todas las clases activas del cuadro div y luego agrego la clase activa para la actual usando la palanca
todo eso funciona bien
pero el problema es cuando hago clic en el mismo cuadro, por ejemplo, box1 no elimina la clase activa, debo hacer clic en el segundo para eliminarlo y en mi código, uso el interruptor, no el complemento.
Quiero que cuando haga clic en un cuadro, el cuadro se abra y cuando vuelva a hacer clic en él, debería estar cerrado nuevamente y si hago clic en otro cuadro después del primer cuadro debería estar cerrado.
¿Qué pasa con mi código?
let faqs = document.querySelectorAll(".allsector .box"); faqs.forEach((faq) => { faq.addEventListener("click", function (e) { faqs.forEach((ele) => { ele.classList.remove("active"); }); faq.classList.toggle("active"); }); }); .allsector .box .content { max-height: 0; visibility: hidden; opacity: 0; transition: all .5s ease-in-out; } .allsector .box.active .content { max-height: 300px; visibility: visible; opacity: 1; } .allsector .box.active .fa-angle-down { transform: rotate(180deg); } <script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script> <div class="allsector"> <div class="box"> <div class="title">title 1 <i class="fas fa-angle-down"></i></div> <div class="content">content 1</div> </div> <div class="box"> <div class="title">title 2 <i class="fas fa-angle-down"></i></div> <div class="content">content 2</div> </div> <div class="box"> <div class="title">title 3 <i class="fas fa-angle-down"></i></div> <div class="content">content 3</div> </div> </div>Retire forEach , use esto:
let faqs = document.querySelectorAll(".allsector .box"); faqs.forEach((faq) => { faq.addEventListener("click", function (e) { faq.classList.toggle("active"); }); });Eliminar forEach de addEventListener .
let faqs = document.querySelectorAll(".allsector .box"); faqs.forEach((faq) => { faq.addEventListener("click", function (e) { faq.classList.toggle("active"); }); });Si classList.toggle() no funciona, existe classList.add() , classList.remove() también. En la función classList.toggle() fue mantenida por classList.remove() . Acabo de simplificar con condiciones if en un bucle forEach .
let faqs = document.querySelectorAll(".allsector .box"); faqs.forEach((faq, idFaq) => { faq.addEventListener("click", function (e) { faqs.forEach((ele, idEle) => { idFaq === idEle && faqs[idEle].classList.contains("active") === false ? faqs[idEle].classList.add("active") : faqs[idEle].classList.remove("active"); }); }); }); .allsector .box .content { max-height: 0; visibility: hidden; opacity: 0; transition: all .5s ease-in-out; } .allsector .box.active .content { max-height: 300px; visibility: visible; opacity: 1; } .allsector .box.active .fa-angle-down { transform: rotate(180deg); } <script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script> <div class="allsector"> <div class="box"> <div class="title">title 1 <i class="fas fa-angle-down"></i></div> <div class="content">content 1</div> </div> <div class="box"> <div class="title">title 2 <i class="fas fa-angle-down"></i></div> <div class="content">content 2</div> </div> <div class="box"> <div class="title">title 3 <i class="fas fa-angle-down"></i></div> <div class="content">content 3</div> </div> </div>