Acordeão de FAQ Interativo

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

Desafio

Fácil

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

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

Em JavaScript:

Adicione um ouvinte de evento de clique à pergunta da FAQ
Quando clicada, alterne a classe "show" na resposta

Em CSS:
Adicione estilos para que:

Quando a resposta da FAQ tiver a classe "show", defina sua opacidade como 1 e sua altura máxima como 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>