HTML Academy · درس

إنشاء Accordion وفق PE

إنشاء Accordion يعمل دون JavaScript ثم تحسينه

الدرس 4 من 413 خطوة

إنشاء Accordion وفق PE درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.

الهدف: إنشاء قائمة أكورديون تعمل من دون JS

يستخدم إصدار PE من قائمة الأكّورديون HTML وحده — زوج العناصر الأصلي <details>/<summary>. انقر على summary لتبديل اللوحة. وهو يعمل من دون CSS أو JS أو إطار عمل، لأنه مدمج في HTML.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

إمكانية الوصول مدمجة

<summary> هو زر قابل للتركيز والتنشيط باستخدام لوحة المفاتيح (يؤدي الضغط على Enter/Space إلى التبديل). تعلن قارئات الشاشة حالة التوسيع أو الطي. يوفّر عنصرا HTML ما قد يتطلبه إنشاء أكورديون مخصص باستخدام React من عشرات الأسطر لمعالجة ARIA والأحداث.

تنسيق الطبقات باستخدام CSS

نسّق مثلث الإفصاح، والمسافات الداخلية للوحة، والانتقالات باستخدام CSS العادي. تعكس السمة open الحالة، ولذلك يُطبَّق details[open] summary { color: blue; } عند التوسيع فقط. لا حاجة إلى JS لتحسين المظهر.

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

تحريك الفتح والإغلاق

يحدث الفتح والإغلاق الافتراضي فورًا. أضف الحركة عبر إجراء انتقال على content-visibility، أو باستخدام JS الذي يقيس ارتفاع اللوحة ويحرّك max-height. في الحالات البسيطة، يُعد التبديل المفاجئ مقبولًا؛ أما الحركة فهي تحسين تدريجي يُطبَّق باستخدام CSS+JS.

تحسينه باستخدام JavaScript

يمكن لـ JS إضافة تحسينات اختيارية: إغلاق أكورديونات أخرى عند فتح أحدها (وضع الفتح الفردي)، وحفظ حالة الفتح في localStorage، وتحريك الانتقال، أو تتبّع العناصر المفتوحة تحليليًا. كل تحسين من هذه التحسينات إضافي بحت.

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

حدث toggle

يُطلق <details> حدث toggle كلما تغيّرت حالة الفتح لديه. استخدمه للاستجابة لتوسيع المستخدم دون إعادة ربط معالجات النقر. وهو متوافق مع النقر بالماوس والتنشيط باستخدام لوحة المفاتيح.

عرض الحالة من جانب الخادم

لعرض أكورديون مفتوح مبدئيًا، عيّن السمة open من جانب الخادم: <details open>. تكون الحالة موجودة في HTML ومتاحة لبرامج الزحف وللمستخدمين ذوي الاتصالات البطيئة قبل تنفيذ أي JS.

متى لا تكفي الميزة المدمجة

إذا تطلّب التصميم أيقونة مخصصة للتوسيع والطي، أو إظهارًا متحركًا، أو لوحة متعددة الأعمدة، فأنشئ إصدارًا مخصصًا — لكن استخدم <details>/<summary> كبنية أساسية إن أمكن. أضف ARIA فقط إذا تعذّر عليك استخدام العناصر الأصلية تمامًا.

التحقق دون JS

عطّل JavaScript في DevTools وتحقّق من استمرار عمل الأكورديون: انقر على summary، وتبدّل اللوحة، ويبقى ترتيب التركيز منطقيًا، ويعمل التنشيط باستخدام لوحة المفاتيح. إذا تعطل أي شيء، فلن يكون JS تحسينًا، بل متطلبًا، وهذا يخالف PE.

فتح عنصر واحد فقط باستخدام CSS

لتطبيق نمط الاختيار من متعدد «فتح عنصر واحد فقط في كل مرة» دون JS، استخدم السمة name على <details> (وهو مدعوم في Chrome/Safari): تشترك كل عناصر <details name="faq"> في الحالة، ولذلك يؤدي فتح أحدها إلى إغلاق البقية. هذا نمط يعتمد على HTML فقط ويحاكي أزرار الاختيار.

الترحيل من أكورديون يعتمد على JS فقط

استبدل divs+JS بـ <details>/<summary>، مع الإبقاء على فئات CSS للتنسيق. والنتيجة HTML أقصر، وعدم الاعتماد على JS، وإتاحة وصول أفضل، ومحتوى قابل للفهرسة. يمكن ترحيل معظم أكورديونات JS إلى PE مع تغيير طفيف يلاحظه المستخدم.

اختبار المعرفة

ما زوج عناصر HTML الذي يوفّر أكورديون يعمل بالكامل دون أي JavaScript؟

أجب عليها في الدرس التفاعلي

الملخص

يستخدم أكورديون PE العنصرين الأصليين <details>/<summary> كأساس، وهما يوفّران إتاحة وصول كاملة وتحكمًا باستخدام لوحة المفاتيح دون JS. أضف CSS للتنسيق المرئي، واستخدم JS اختياريًا للحركة أو سلوك فتح عنصر واحد فقط. تحقّق من استمرار عمل الأساس بتعطيل JS. كما تتيح السمة الجديدة name وضع فتح عنصر واحد فقط باستخدام CSS وحده.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 40
الدروس: 159

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «إنشاء Accordion وفق PE» مجاني؟

نعم — نص درس «إنشاء Accordion وفق PE» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء Accordion وفق PE»؟

إنشاء Accordion يعمل دون JavaScript ثم تحسينه تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟

لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «إنشاء Accordion وفق PE»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟

نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى HTML Academy