تُستخدم أكورديونات CSS على نطاق واسع للقوائم والمقتطفات والصور ومقاطع الفيديو والأسئلة الشائعة والقوائم ومقتطفات المقالات القابلة للتوسيع والقابلة للطي. يمكنك إنشائها بسهولة باستخدام HTML و CSS و JavaScript (أو jQuery). يعد إنشاء أكورديونات CSS فقط مهمة صعبة بعض الشيء ، ولكنها مفيدة للغاية في البيئات التي تم تعطيل جافا سكريبت فيها.

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

بناء الأكورديون الأساسي باستخدام HTML فقط

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

التعليمات 1



Lorem ipsum dolor، sit amet consectetur adipisicing elit. نظرًا لخطأ في البيانات الشحمية ، فسرعان ما يتم تفسير السيرة الذاتية تمامًا كما هو الحال في الوقت نفسه!






التعليمات 2



نتيجة لتلوث الأذن recusandae tempora sint eligendi، perferendis aspernatur Architecto voluptas labourum adipisci neque voluptates عاقبة. 









instagram viewer



التعليمات 3



Tenetur ، ex delectus ، perferendis aperiam voluptuate molestiae ratione rerum vitae ab modi، minus placeat quis gentissimos. Dolorem quaerat odit، iusto labouriosam Posimus، in Architecto aliquam Goodsi sapiente saepe Sequi at eligendi hic repellendus quos!

تصميم الأكورديون

يمكنك تصميم الأكورديون عن طريق ضبط لون الخلفية, نصف قطر الحد, هامش, حشوة، إلخ.

هيئة {
 عائلة الخطوط: 'Lucida Sans'، 'Lucida Sans Regular'، 'Lucida Grande'، 'Lucida Sans Unicode'، Geneva، Verdana، sans-serif؛
 أقصى عرض: 30 ريم ؛
 الهامش: 1.5rem auto ؛
}
ملخص {
 وزن الخط: 600 ؛
 اللون: rgb (255 ، 255 ، 255) ؛
 لون الخلفية: RGB (7 ، 185 ، 255) ؛
 الحشو: 1.2 ريم.
 الهامش السفلي: 1.2rem ؛
 نصف قطر الحدود: 0.5rem ؛
 المؤشر: المؤشر.
}

انتاج:

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

أنشئ قسم الأسئلة الشائعة المخصص الخاص بك

هناك طريقتان شائعتان لإنشاء أكورديون CSS مخصص فقط. يمكنك إما استخدام مربعات الاختيار أو أزرار الاختيار ؛ سنشرح كلتا الطريقتين.

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

يستخدم أسلوب خانة الاختيار خانة الاختيار كنوع الإدخال. عندما يحدد المستخدم علامة تبويب ، يقوم بتحديد خانة الاختيار ويفتحها. يمكنك فتح علامات تبويب متعددة في وقت واحد باستخدام طريقة مربع الاختيار ، على غرار الطريقة التي يمكنك بها تحديد أكثر من خانة اختيار واحدة داخل ملف شكل HTML.

لغة البرمجة

CSS مخصص فقط الأكورديون (الأسئلة الشائعة)

باستخدام طريقة Checkbox






كيف تصنع أكورديون مخصص باستخدام CSS فقط؟


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas al Liquid tenetur quas suscipit
 افتراض أ ، ليس له مثيل ، ممارسة مميزة لاسم مستعار ullam quia. يياتي Corrupti
 الضرورة nihil.









كيف تغير ارتفاع العناصر الزائفة؟


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam ، دولور وآخرون! Tempore mollitia voluptatibus
 ducimus excepturi doloribus aliquam ipsum vel، accusantium quo nemo expedita esse eos libero incidunt
 إعادة النظر في الوجود السابق hic ipsa odit in! افينيت.

عام CSS

تطبيق CSS الأساسي على الجسم.

هيئة {
 اللون: # 502c2c ؛
 الخلفية: # f1edec ؛
 الحشو: 1.2 ريم.
 عائلة الخطوط: 'Segoe UI'، Tahoma، Geneva، Verdana، sans-serif؛
 أقصى عرض: 45 ريم ؛
 الهامش: 0 تلقائي ؛
 حجم الخط: 1.2rem ؛
}

تصميم الأكورديون

أولاً ، قم بإخفاء مربعات الاختيار عن طريق تعديل الإدخال.

/ * إخفاء مربعات الاختيار أو زر الاختيار * /
إدخال {
 الموقف: مطلق.
 العتامة: 0؛
 مؤشر z: -1 ؛
}

الآن ، صمم الأكورديون. يمكنك إضافة::بعد، بعدما العنصر الزائف لملف + لافتة. يمكنك الرجوع إلى أ مخطط مرجع كيان الحرف واستخدام أي الكيان تحويل حاسبة للعثور على قيمة CSS لقيمة رقمية. هنا ، قيمة CSS لـ + يكون \ 002 ب.

/ * أنماط الأكورديون * /
.التعليمات {
 اللون: # ffe3e3 ؛
 الهامش السفلي: 3rem ؛
}
.faq-label {
 حجم الخط: 1.5rem ؛
 عرض: فليكس ؛
 محاذاة العناصر: مركز ؛
 تبرير المحتوى: مسافة بين ؛
 الحشو: 1em ؛
 الخلفية: # b61818 ؛
 وزن الخط: عريض ؛
 المؤشر: المؤشر.
 تحديد المستخدم: لا شيء ؛
}
.faq-label:: بعد {
 المحتوى: "\ 002B" ؛
 الحشو: 0.51rem ؛
 تحويل: مقياس (1.8) ؛
 محاذاة النص: مركز ؛
 الانتقال: كل 0.35 ثانية ؛
}
.faq-content {
 أقصى ارتفاع: 0 ؛
 الحشو: 0 1em ؛
 اللون: # 2c3e50 ؛
 الخلفية: أبيض ؛
 الانتقال: كل 0.35 ثانية ؛
 عرض لا شيء؛
}

الآن ، دعونا نضيف وظائف إلى الأكورديون باستخدام المجاور ومحددات السمات. هنا، \2013 هي قيمة CSS لـ –، تمثل القيمة الرقمية –.

الإدخال: محدد + .faq-label {
 الخلفية: # 8f1414 ؛
}
الإدخال: محدد + .faq-label:: بعد {
 المحتوى: '2013' ؛
 تحويل: مقياس (1.5) ؛
}
الإدخال: فحص ~ .faq-content {
 أقصى ارتفاع: 100vh ؛
 الحشو: 1em ؛
 العرض محجوب؛
 الانتقال: كل 0.35 ثانية ؛
}

انتاج:

استخدام طريقة زر الراديو

طريقة زر الراديو لها نوع إدخال تم ضبطه على مذياع. عندما ينقر المستخدم على علامة تبويب ، يتم فتح زر الاختيار المخفي المقابل لعلامة التبويب تلك. عند النقر فوق علامة التبويب التالية ، يتم إغلاق علامة التبويب السابقة على الفور. يمكنك فقط فتح علامة تبويب واحدة في كل مرة باستخدام طريقة زر الراديو.

لغة البرمجة

CSS مخصص فقط الأكورديون (الأسئلة الشائعة)

باستخدام طريقة زر الراديو






كيف تصنع أكورديون باستخدام طريقة Radio Button؟


 Lorem، ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atqueicta eum numquam required، nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis، officiis odio repellendus.









كيفية إنشاء أكورديون مخصص باستخدام CSS فقط؟


 Aperiam dolores autem odit، nihil eius sit minima quas laudantium aspernatur luximus reiciendis vitae ducimus labore quidem velit velit temporibus! Illo sunt placeat officiis ، tiure magnam. Ad sit perferendis ducimus desta، est aspernatur asperiores، quasi beatae quos deleniti.









ماذا يعني أسلوب الأكورديون؟


 Laudantium quibusdam labouriosam hic omnis quas ullam Goodsi rem. الهندسة المعمارية من العمل مع الأخذ بعين الاعتبار أن هذا هو شكل كبير من الوقت المناسب لك. فيل ، غير!









أغلق الكل ×

CSS

انسخ CSS أعلاه لطريقة Checkbox لأن كلتا الطريقتين تختلفان عن وجهة النظر الهيكلية فقط. قد تلاحظ أن هناك علامة تبويب واحدة مفتوحة طوال الوقت. يحدث هذا لأنه لا يمكنك إلغاء تحديد أزرار الاختيار مثل مربعات الاختيار. لإنجاز ذلك ، أضف كود CSS أدناه إلى زر الاختيار "إغلاق الكل" بدون أي وصف.

/ * إغلاق الكل * /
.faq-label {
 الموقف: نسبي ؛
}
.faq-close {
 عرض: مضمنة كتلة ؛
 الحشو: 1rem.
 حجم الخط: 1rem ؛
 الخلفية: # b61818 ؛
 المؤشر: المؤشر.
 الموقف: مطلق.
 اليسار: ٦٤ ريم ؛
}

انتاج:

استمر في التجربة وإضافة الرسوم المتحركة

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

ناينسى موريا (16 مقالة منشورة)

Naincy متخصصة في بناء مواقع ويب سريعة الاستجابة واستراتيجية محتوى فعالة إلى جانب نسخ الويب. إنها كاتبة تقنية مستقلة تراقب التقنيات الشائعة.

المزيد من Naincy Mourya