¿Cómo puedo modificar los códigos a continuación para que sea posible que varios divs hagan este cambio en la misma página?
Js funciona solo para la primera entrada, pero quiero poder voltear varios divs en la misma página.
var card = document.querySelector('.card'); card.addEventListener('click', function() { card.classList.toggle('is-flipped'); }); .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; } .card { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d; } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: #333; color: white; transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); } <div class="flip-box"> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> </div> </div>Primero, cambié querySelector a querySelectorAll . Luego, recorro todas las tarjetas de la página y adjunto el controlador de eventos de clic, exactamente como lo había hecho inicialmente.
var cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('click', function() { card.classList.toggle('is-flipped'); }); }) .flip-box { background-color: transparent; width: 300px; height: 200px; border: 1px solid #f1f1f1; } .card { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1s; transform-style: preserve-3d; } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: #333; color: white; transform: rotateY(180deg); } .card.is-flipped { transform: rotateY(180deg); } <div class="flip-box"> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> </div> <div class="card"> <div class="flip-box-front"> <h2>Front Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> <div class="flip-box-back"> <h2>Back Side</h2> <p> click to fillp </p> <p> click to fillp </p> <p> click to fillp </p> </div> </div> </div>