Accordion de FAQ interativo

Parte da seção JavaScript in Action do Journey de HTML da Coddy. Lição 24 de 27.

Desafio

Fácil

Temos uma página de FAQ simples com algumas perguntas. Este tipo de design é muito comum: quando um usuário clica em uma pergunta, a resposta oculta deve deslizar para baixo suavemente. Ao mesmo tempo, podemos girar o sinal de "+" para um "×" para mostrar que a seção está aberta.

Temos uma seção de FAQ com uma pergunta. Seu trabalho é torná-la interativa:

Em JavaScript:

Adicione um ouvinte de evento de clique (click event listener) à pergunta do FAQ
Quando clicado, alterne a classe "show" na resposta

Em CSS:
Adicione estilos para que:

Quando a resposta do FAQ tiver a classe "show", defina sua opacity para 1 e max-height para 300px

Experimente você mesmo

<!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>