Acordeón de preguntas frecuentes interactivo

Parte de la sección JavaScript in Action 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 una "×" y mostrar que la sección está abierta.

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

En JavaScript:

Agrega un escuchador de eventos de clic (event listener) a la pregunta del FAQ
Cuando se haga clic, alterna (toggle) la clase "show" en la respuesta

En CSS:
Agrega estilos para que:

Cuando la respuesta del FAQ tenga la clase "show", establece su opacity a 1 y su max-height a 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>