كيفية إنشاء قائمة الأكورديون المتجاوبة باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة أكورديون متجاوبة باستخدام HTML و CSS فقط

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء قائمة أكورديون متجاوبة باستخدام HTML و CSS فقط.

 

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

 

يتم التحكم في علامات تبويب الأكورديون هذه باستخدام HTML <input type = ”radio”> ، لذلك يمكننا فقط إظهار محتوى رأس واحد في وقت واحد وهذا يعني أنه عند توسيع محتوى الرأس الثاني ، سيتم طي محتوى الرأس الأول تلقائيًا. إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج [قائمة الاكورديون المتجاوبة].

 

في الفيديو ، شاهدت قائمة الأكورديون وكيف يتوسع محتواها وينهار. لقد استخدمت أيقونات رائعة للخط (+ و -) لإعلام المستخدم أو الإشارة إليه بأن المحتوى مطوي أو موسع حاليًا. هذا برنامج CSS خالص ، وإذا كنت مبتدئًا ، فيمكنك أيضًا إنشاء هذا النوع من الأكورديون واستخدامه في مشروعاتك وصفحات HTML.

 

 

هذا البرنامج ممكن فقط مع HTML <input type = ”radio”> وعلامة <label>. يمكنك أيضًا استخدام <input type = ”checkbox”> لإنشاء هذا الأكورديون ولكن عند استخدام مربع اختيار ، لا يمكنك طي علامة التبويب الموسعة السابقة تلقائيًا عند النقر فوق علامة تبويب جديدة مما يعني أنه يتعين عليك إخفاء المحتوى أو إظهاره يدويًا إذا تستخدم مربع اختيار ولكن في زر الاختيار ، يتم إغلاق علامة التبويب المفتوحة مسبقًا تلقائيًا عند فتح علامة تبويب جديدة.

 

قائمة الاكورديون المستجيبة

لإنشاء هذا البرنامج (قائمة الاكورديون المتجاوبة). أولاً ، تحتاج إلى إنشاء ملفين ، أحدهما ملف HTML والآخر هو ملف CSS. بعد إنشاء هذه الملفات ، قم فقط بلصق الأكواد التالية في ملفك.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow