0
144
VistasÍcono para rotar en ese detalle/resumen que está abierto y se hace clic
Cuando hago clic en el segundo campo de detalle/resumen, el ícono gira solo en el primer campo de detalle/resumen y no en el segundo.
Quiero que el ícono gire sobre ese detalle/resumen que está abierto y se hace clic.
function changeStyle() { let element = document.querySelector(".rotate"); element.classList.toggle('down'); } .rotate.down { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .detail-container { padding-right: 100px; padding-left: 100px; width: 100%; min-width: 55%; display: flex; flex-direction: column; } summary { padding: 22px; background-color: #2d2d2d; margin-bottom: .4em; cursor: pointer; outline: none; font-size: 1.5em; font-family: "roboto", sans-serif; font-weight: 300; } .plus { display: flex; justify-content: space-between; } details[open] { background-color: #2d2d2d; padding-bottom: 20px; margin-bottom: 10px; } details[open] summary { border-bottom: 1px solid black; } <div class="detail-container"> <details onclick="changeStyle()"> <summary> <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i> </div> </summary> <p> Lorem </p> </details> <details onclick="changeStyle()"> <summary> <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i> </div> </summary> <p> Lorem </p> </details> </div> Este "+" debe girar 45 grados porque se hace clic pero solo gira el superior 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
document.querySelector(".rotate") obtiene todos los elementos de rotate en el documento.
Debe obtener el elemento en el que se hace clic, luego encontrar el elemento secundario que necesita rotar:
function changeStyle() { let element = event.target.querySelector(".rotate"); element.classList.toggle('down'); } function changeStyle() { let element = event.target.querySelector(".rotate"); element.classList.toggle('down'); } .rotate.down { -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } summary { padding: 22px; background-color: #2d2d2d; margin-bottom: .4em; cursor: pointer; outline: none; font-size: 1.5em; font-family: "roboto", sans-serif; font-weight: 300; } summary { list-style: none; } .plus { display: flex; justify-content: space-between; } details[open] { background-color: #2d2d2d; padding-bottom: 20px; margin-bottom: 10px; } details[open] summary { border-bottom: 1px solid black; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"/> <details onclick="changeStyle()"> <summary> <div class="plus">DEFAULT TEXT <i class="fas fa-plus rotate"></i></div> </summary> <p> Lorem </p> </details> <details onclick="changeStyle()"> <summary> <div class="plus">DEFAULT TEXT<i class="fas fa-plus rotate"></i></div> </summary> <p> Lorem </p> </details>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta