بناء لوحات الأكورديون التفاعلية | خاصية العنصر الشقيق التالي nextElementSibling

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

من أجمل التطبيقات الواقعية للخاصية nextElementSibling بناء مكون الأسئلة الشائعة (الأكورديون): حيث يتبع كل زر سؤال <button> عنصرُ الإجابة الشقيق مباشرةً <div hidden>؛ وعند نقر الزر نعكس خاصية الإخفاء panel.hidden على btn.nextElementSibling مع تحديث aria-expanded لقارئات الشاشة.

الصف 2 كود برمجي

JavaScript

const faq = document.getElementById('faq-box');
faq.addEventListener('click', function (e) {
  const btn = e.target.closest('button.faq-q');
  if (!btn) return;
  const panel = btn.nextElementSibling;
  if (!panel) return;
  panel.hidden = !panel.hidden;
  btn.setAttribute('aria-expanded', String(!panel.hidden));
});

جرّب بنفسك

الصف 3 معاينة حية

الصف 4 ملاحظة هامة

Building Accordion Panel Toggles بناء لوحات الأكورديون التفاعلية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (خاصية العنصر الشقيق التالي nextElementSibling)