دليل إنشاء أكورديون CSS حصري: التحكم في عرض قسم واحد فقط

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

لماذا نستخدم الأكورديون الحصري؟

بينما تسمح الأكورديونات القياسية بفتح عدة أقسام في وقت واحد، تقدم الأكورديونات الحصرية عدة مزايا:

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

النهج المعتمد على CSS فقط

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

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

بناء الأكورديون الحصري: خطوة بخطوة

لنقسم عملية إنشاء أكورديون حصري باستخدام CSS فقط. سنغطي بنية HTML، وتنسيق CSS، والمنطق وراء آلية الكشف الفردي.

1. بنية HTML

أساس الأكورديون الخاص بنا هو بنية HTML. سنستخدم مزيجًا من عناصر <input type="radio">، وعناصر <label>، وعناصر <div> لإنشاء أقسام الأكورديون.

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <label for="section1">القسم 1</label>
  <div class="content">
    <p>محتوى القسم 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">القسم 2</label>
  <div class="content">
    <p>محتوى القسم 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">القسم 3</label>
  <div class="content">
    <p>محتوى القسم 3.</p>
  </div>
</div>

الشرح:

• <div class="accordion">: هذا هو الحاوية الرئيسية للأكورديون بأكمله.
• <input type="radio" name="accordion" id="section1" checked>: يبدأ كل قسم بزر اختيار (radio button). السمة name="accordion" ضرورية؛ فهي تجمع كل أزرار الاختيار معًا، مما يضمن أنه لا يمكن تحديد سوى زر واحد في كل مرة. تُستخدم السمة id لربط زر الاختيار بالملصق (label) المقابل له. السمة checked في زر الاختيار الأول تجعله القسم المفتوح افتراضيًا.
• <label for="section1">القسم 1</label>: يعمل الملصق (label) كرأس قابل للنقر لكل قسم. يجب أن تتطابق السمة for مع id زر الاختيار المقابل.
• <div class="content">: يحتوي هذا على المحتوى الفعلي لكل قسم. في البداية، سيكون هذا المحتوى مخفيًا.

2. تنسيق CSS

الآن، لِنُنسّق الأكورديون باستخدام CSS. سنركز على إخفاء أزرار الاختيار، وتنسيق الملصقات، والتحكم في رؤية المحتوى بناءً على حالة زر الاختيار.

.accordion {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion input[type="radio"] {
  display: none;
}

.accordion label {
  display: block;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
}

.accordion input[type="radio"]:checked + label {
  background-color: #ddd;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
}

الشرح:

• .accordion input[type="radio"] { display: none; }: هذا يخفي أزرار الاختيار عن الأنظار. لا تزال وظيفية، ولكنها غير مرئية للمستخدم.
• .accordion label { ... }: هذا ينسق الملصقات، مما يجعلها تبدو كرؤوس قابلة للنقر. نضبط cursor على pointer للإشارة إلى أنها تفاعلية.
• .accordion .content { ... display: none; }: في البداية، نخفي محتوى كل قسم باستخدام display: none;.
• .accordion input[type="radio"]:checked + label { ... }: هذا ينسق ملصق زر الاختيار المحدد حاليًا (checked). نغير لون الخلفية للإشارة إلى أنه نشط. يستهدف + (محدد الأخ المجاور) الملصق الذي يتبع مباشرةً زر الاختيار المحدد.
• .accordion input[type="radio"]:checked + label + .content { ... display: block; }: هذا يعرض محتوى القسم المحدد حاليًا. مرة أخرى، نستخدم محدد الأخ المجاور (+) مرتين لاستهداف .content div الذي يتبع الملصق، والذي بدوره يتبع زر الاختيار المحدد. هذا هو مفتاح منطق الأكورديون المعتمد على CSS فقط.

3. اعتبارات سهولة الوصول

سهولة الوصول أمر بالغ الأهمية لأي مكون ويب. إليك بعض الاعتبارات لجعل الأكورديون المعتمد على CSS فقط سهل الوصول:

• التنقل باستخدام لوحة المفاتيح: تأكد من أن المستخدمين يمكنهم التنقل في الأكورديون باستخدام لوحة المفاتيح. أزرار الاختيار قابلة للتركيز بطبيعتها باستخدام لوحة المفاتيح، ولكن قد ترغب في إضافة إشارات مرئية (على سبيل المثال، مخطط تفصيلي للتركيز) عندما يتم التركيز على ملصق.
• سمات ARIA: استخدم سمات ARIA لتوفير معلومات دلالية إضافية لقارئات الشاشة. على سبيل المثال، يمكنك استخدام aria-expanded للإشارة إلى ما إذا كان القسم مفتوحًا أم مغلقًا، و aria-controls لربط الملصق بقسم المحتوى المقابل.
• HTML الدلالي: استخدم عناصر HTML الدلالية عند الاقتضاء. على سبيل المثال، ضع في اعتبارك استخدام عناصر <h2> أو <h3> لعناوين الأقسام بدلاً من مجرد تنسيق الملصقات.
• التباين: تأكد من وجود تباين لوني كافٍ بين النص والخلفية لسهولة القراءة.

إليك مثال على كيفية إضافة سمات ARIA إلى بنية HTML الخاصة بنا:

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked aria-controls="content1">
  <label for="section1" aria-expanded="true">القسم 1</label>
  <div class="content" id="content1" aria-hidden="false">
    <p>محتوى القسم 1.</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false">القسم 2</label>
  <div class="content" id="content2" aria-hidden="true">
    <p>محتوى القسم 2.</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false">القسم 3</label>
  <div class="content" id="content3" aria-hidden="true">
    <p>محتوى القسم 3.</p>
  </div>
</div>

و CSS المقابل لتحديث aria-expanded و aria-hidden:

.accordion [aria-expanded="true"] {
 background-color: #ddd;
}

.accordion [aria-hidden="false"] {
 display: block;
}

.accordion [aria-hidden="true"] {
 display: none;
}

4. التخصيص المتقدم

يمكن تخصيص بنية الأكورديون الأساسية بطرق مختلفة لتناسب متطلبات التصميم الخاصة بك:

• الرسوم المتحركة: أضف انتقالات أو رسوم متحركة CSS لفتح وإغلاق أقسام المحتوى بسلاسة. على سبيل المثال، يمكنك استخدام خاصية transition لتحريك height أو opacity للمحتوى.
• الأيقونات: قم بتضمين أيقونات في الملصقات للإشارة بصريًا إلى حالة الفتح/الإغلاق لكل قسم. يمكنك استخدام العناصر الزائفة في CSS (::before أو ::after) لإضافة الأيقونات.
• التصميم: قم بتخصيص الألوان والخطوط والتباعد لتتناسب مع التصميم العام لموقعك على الويب.

إليك مثال على إضافة انتقال بسيط إلى ارتفاع المحتوى:

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
  height: auto; /* مهم: يسمح للمحتوى بالتمدد إلى ارتفاعه الطبيعي */
}

5. أمثلة عالمية وتكييفات

الأكورديون الحصري المعتمد على CSS فقط هو نمط متعدد الاستخدامات يمكن تكييفه مع سياقات مختلفة عبر ثقافات ومناطق مختلفة. إليك بعض الأمثلة:

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

6. الأخطاء الشائعة والحلول

على الرغم من أن النهج المعتمد على CSS فقط فعال، إلا أن هناك بعض المزالق المحتملة التي يجب الانتباه إليها:

• تحديد CSS (Specificity): تأكد من أن قواعد CSS الخاصة بك لها تحديد كافٍ لتجاوز أي أنماط متعارضة. استخدم محددات أكثر تحديدًا أو الكلمة الرئيسية !important بحذر.
• مشاكل سهولة الوصول: يمكن أن يؤدي إهمال اعتبارات سهولة الوصول إلى خلق حواجز للمستخدمين ذوي الإعاقة. اختبر دائمًا الأكورديون الخاص بك باستخدام قارئات الشاشة والتنقل بلوحة المفاتيح.
• المحتوى المعقد: بالنسبة للمحتوى المعقد جدًا داخل أقسام الأكورديون، قد يوفر الحل المستند إلى JavaScript مزيدًا من المرونة والتحكم.
• توافق المتصفح: اختبر الأكورديون الخاص بك في متصفحات مختلفة لضمان سلوك متسق. بينما تدعم معظم المتصفحات الحديثة محددات CSS المستخدمة في هذا النهج، قد تتطلب المتصفحات القديمة polyfills أو حلولاً بديلة.

7. بدائل الأكورديون المعتمد على CSS فقط

بينما ركزت هذه المقالة على الأكورديونات المعتمدة على CSS فقط، هناك خيارات أخرى متاحة:

• أكورديونات JavaScript: توفر مزيدًا من المرونة والتحكم في سلوك الأكورديون. يمكن استخدام JavaScript لإضافة رسوم متحركة، والتعامل مع المحتوى المعقد، وتحسين سهولة الوصول. توفر مكتبات مثل jQuery UI وأطر العمل مثل React و Vue.js مكونات أكورديون جاهزة للاستخدام.
• عناصر HTML <details> و <summary>: توفر هذه العناصر الأصلية في HTML وظيفة أكورديون أساسية بدون أي JavaScript. ومع ذلك، فإنها تفتقر إلى سلوك الكشف الحصري وتتطلب تنسيق CSS للتخصيص.

الخاتمة

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

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

مصادر إضافية

• MDN Web Docs: <input type="radio">
• MDN Web Docs: محدد الأخ المجاور (+)
• ممارسات تأليف WAI-ARIA: الأكورديون