Actualmente estoy trabajando en un sitio y necesito tener una sección de "preguntas frecuentes". Lo diseñé simplemente con una pregunta, un ícono y cuando haces clic en el div de esa pregunta, aparece la respuesta.
Conseguí que apareciera la respuesta sin demasiados problemas pero me falta un último elemento, la rotación del icono "+" que se convertirá en una "x".
No puedo rotar y animar este ícono, lo intenté de varias maneras pero nada funciona. Realmente soy un principiante en el desarrollo, especialmente si toca el javascript.
Estoy abierta a cualquier consejo y sugerencias que me ayuden, gracias de antemano <3
$(document).ready(function () { $(".content").hide(); $(".show_hide").on("click", function () { $(this).next('.content').slideToggle(200);}); }); body{ font-family:helvetica} .show_hide{ cursor:pointer;} #text{ display:none;} .btn-container{ margin: auto;} #icon{ border-radius:50%; border:1px solid black; padding:5px; float:right;} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <section id="faq"> <h2> Multiple questions</h2> <hr> <div class="show_hide" data-content="toggle-text"> <big>This is a question ?</big> <i id="icon"class="fas fa-plus"></i> </div> <div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div> <hr> <div class="show_hide" data-content="toggle-text"> <big>This is a question ?</big> <i id="icon"class="fas fa-plus"></i> </div> <div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div> <hr>Utilice las clases fa-rotate-* y fa-flip-* cuando haga referencia a un icono.
<i id="icon"class="fas fa-plus fa-rotate-90"></i>Agregue un toggleClass() dentro del evento de clic en el archivo JS; luego crea una clase active (o cualquier otro nombre que elijas) dentro del archivo CSS donde esta clase hace que su contenido gire 45 grados a través de transform: rotate(45deg) .
Además, asegúrese de que todos los nombres de id sean únicos dentro de un solo documento HTML . En su caso, creo que es mejor cambiar el id="icon" a "class="icon" ya que esto es lo que se supone que es la class .
$(document).ready(function () { $(".content").hide(); $(".show_hide").on("click", function () { $(this).find('.icon').toggleClass('active'); $(this).next('.content').slideToggle(200); }); }); body{ font-family:helvetica} .show_hide{ cursor:pointer;} #text{ display:none;} .btn-container{ margin: auto;} .icon{ border-radius:50%; border:1px solid black; padding:5px; float:right;} .icon.active { transform: rotate(45deg) } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <section id="faq"> <h2> Multiple questions</h2> <hr> <div class="show_hide" data-content="toggle-text"> <big>This is a question ?</big> <i class="icon fas fa-plus"></i> </div> <div class="content">This is an answer.<br>This is an answer.<br>This is an answer.</div> <hr> <div class="show_hide" data-content="toggle-text"> <big>This is a question ?</big> <i class="icon fas fa-plus"></i> </div> <div class="content">This is an answer.<br>This is an answer.<br>This is an answer. </div> <hr>