Acordeón interactivo de preguntas frecuentes

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 24 de 27.

Desafío

Fácil

Tenemos una página de FAQ sencilla con algunas preguntas. Este tipo de diseño es muy común: cuando un usuario hace clic en una pregunta, la respuesta oculta debe deslizarse hacia abajo suavemente. Al mismo tiempo, podemos rotar el signo “+” para convertirlo en un “×” y mostrar que la sección está abierta.

Tenemos una sección de FAQ con una pregunta. Tu tarea es hacerla interactiva:

En JavaScript:

Añade un detector de eventos de clic a la pregunta de FAQ
Al hacer clic, alterna la clase "show" en la respuesta

En CSS:
Añade estilos para que:

Cuando la respuesta de FAQ tenga la clase "show", establece su opacidad en 1 y su max-height en 300px

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>FAQ Challenge</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
   <h1>FAQ – Healthy Lifestyle</h1>
  <div class="faq">
    <div class="faq-item">
      <div class="faq-question">
        <span>What does a balanced diet mean?</span>
        <span>+</span>
      </div>
      <div class="faq-answer">
        A balanced diet includes a variety of foods — fruits, vegetables, whole grains, lean proteins, and healthy fats — in the right proportions to keep your body nourished and energized.
      </div>
    </div>
  </div>
 <script src="script.js"></script>
</body>
</html>