انتقل إلى محتوى الدرس

Toggling States classList toggle عكس الفئة classList toggle

تحكم بفئات CSS بنظافة في JavaScript عبر كائن classList باستخدام دوال add وremove والعكس المشروط toggle والفحص الدقيق contains والاستبدال الذري replace.
3 صفوف تعليمية
جافا سكريبت
3,728 مشاهدة

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

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

تضيف الدالة el.classList.toggle("expanded") الفئة إن غابت وتحذفها إن وجدت وترجع حالتها المنطقية الجديدة. والأجمل أن تمرير وسيط منطقي ثانٍ مثل el.classList.toggle("has-error", score < 50) يختصر جملة if...else كاملة في سطر واحد حاسم!

الصف 2 كود برمجي
JavaScript
function flipDetails() {
  const panel = document.getElementById('faq-body');
  const isOpen = panel.classList.toggle('open-panel');
  document.getElementById('faq-btn').textContent = isOpen ? 'Hide Answer' : 'Show Answer';
}
الصف 3 ملاحظة هامة