أكورديون أسئلة شائعة تفاعلي

جزء من قسم JavaScript in Action في رحلة HTML على Coddy. الدرس 24 من 27.

التحدي

سهل

لدينا صفحة أسئلة شائعة بسيطة تحتوي على بضعة أسئلة. هذا النوع من التصميم شائع جداً: عندما ينقر المستخدم على سؤال، يجب أن تنسدل الإجابة المخفية بسلاسة. في الوقت نفسه، يمكننا تدوير علامة "+" إلى "×" لإظهار أن القسم مفتوح.

لدينا قسم أسئلة شائعة يحتوي على سؤال واحد. مهمتك هي جعله تفاعلياً:

في JavaScript:

أضف مستمع حدث نقر (click event listener) إلى سؤال الأسئلة الشائعة
عند النقر، قم بتبديل فئة "show" على الإجابة

في CSS:
أضف أنماطاً بحيث:

عندما تحتوي إجابة الأسئلة الشائعة على فئة "show"، اضبط opacity الخاصة بها على 1 و max-height على "300px"

جرّب بنفسك

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