Tengo un blog/sitio web de cuestionarios en Blogger. Para mostrar las respuestas de las preguntas, tengo el siguiente código html:
<button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div> <button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div> <button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div>Y JavaScript así:
<script type='text/javascript'> //<![CDATA[ var acc = document.getElementsByClassName("acc"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var pnl = this.nextElementSibling; if (pnl.style.display === "block") { pnl.style.display = "none"; } else { pnl.style.display = "block"; } }); } //]]> </script>Y CSS así:
.acc { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .acc:hover { background-color: #ccc; } .pnl { padding: 0 18px; display: none; background-color: white; overflow: hidden; }Si alguien hace clic en todos los botones, los botones actúan como conmutadores en lugar de mostrar una respuesta, luego, cuando se hace clic en el siguiente botón, ocultan la respuesta anterior y muestran la nueva en su lugar. ¿Qué hay que cambiar para habilitar esto?
Gracias
Pruebe este usando un forEach .
var acc = document.getElementsByClassName("acc"); let pn1 = document.getElementsByClassName("pnl"); for (let i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); [...acc].forEach((item,index) =>{ if(item == acc[i]){ pn1[index].style.display = "block"; }else{ pn1[index].style.display = "none"; } }) }) } .acc { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .acc:hover { background-color: #ccc; } .pnl { padding: 0 18px; display: none; background-color: white; overflow: hidden; } <button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div> <button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div> <button class="acc">Show Answer</button> <div class="pnl"> <p>Correct Answer</p> </div>Retire los botones.
Agregue lo siguiente sobre cada .pnl
<!-- #ids must be unique so btn* = btn1, btn2, etc --> <!-- [for] of label must match #id of input --> <input id='btn*' class="acc" name='acc' type='radio' hidden> <label for='btn*'>Show Answer</label>
- Explicación: una etiqueta y un control de formulario (p. ej.,
<input>,<select>, etc.) se pueden asociar entre sí si el control de formulario tiene un#idy la etiqueta tiene un[for]que coincide. Si se hace clic en uno, se verifica, etc., el otro también lo hace.
.acc:checked+label+.pnl { display: block }
- Explicación: si se marca una entrada, entonces el
.pnlque está al frente de la etiqueta que está al frente de la entrada. Tenga en cuenta que cuando un grupo de botones de radio comparte un[name]solo se puede marcar uno a la vez. Además, los botones de radio están ocultos, por lo que parece que la etiqueta es la única etiqueta que interactúa con el usuario.
.acc { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .acc:hover { background-color: #ccc; } .pnl { padding: 0 18px; display: none; background-color: white; overflow: hidden; } .acc:checked+label+.pnl { display: block } label { display: block } <input id='btn1' class="acc" name='acc' type='radio' hidden> <label for='btn1'>Show Answer</label> <div class="pnl"> <p>Correct Answer</p> </div> <input id='btn2' class="acc" name='acc' type='radio' hidden> <label for='btn2'>Show Answer</label> <div class="pnl"> <p>Correct Answer</p> </div> <input id='btn3' class="acc" name='acc' type='radio' hidden> <label for='btn3'>Show Answer</label> <div class="pnl"> <p>Correct Answer</p> </div>