إنشاء أكورديون HTML فقط لإخفاء المحتوى وكشفه (بدون JS أو CSS)

in الموارد والأدوات

هل تعلم أن هناك حل HTML5 أصلي لإنشاء زر أكورديون لقراءة المزيد / أقل لإخفاء المحتوى وكشفه باستخدام NO JavaScript أو CSS. تابع القراءة لمعرفة كيف.

html5 الأكورديون

و علامات HTML5 هي رسميًا ملف عنصر واجهة الكشف، ولكن يقترن ستمنحك علامات HTML5 ملف نقية أكورديون HTML فقط.

معنى لا JS أو CSS وهناك حاجة. كم ذلك رائع!

فيما يلي مثال يوضح عنصرًا بسيطًا بامتداد و .

إليك الرمز:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

وإليك كيف سيبدو:

تفاصيل أكثر

هذا هو أكورديون HTML5 أصلي لإخفاء المحتوى وكشفه. رائع ، أليس كذلك؟

كيف تعمل؟  تعمل العلامة كغلاف لعنصر يمكن فتحه أو إغلاقه. يتعين على المستخدم النقر فوق الملصق الموجود بامتداد علامة لفتح أو إغلاق العنصر.

ماذا عن التصميم والسلوك؟

أنماط

يمكنك تطبيق نمط CSS لتخصيص مظهر مربع نص الكشف. يعطي ما يلي نمط واجهة مبوب:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

بشكل افتراضي ، يظهر المؤشر كسهم ، ولكن إذا كنت تريده أن يكون ملف لافتا اليد بدلاً من ذلك ، استخدم هذا:

details {
cursor: pointer;
}

السلوك

ضبط السلوكيات محدود للغاية ، هناك شيء واحد فقط يمكنك القيام به وهو عمل النص المكشوف فتح بشكل افتراضي.

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

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
تفاصيل أكثر

هذا هو أكورديون HTML5 أصلي لإخفاء المحتوى وكشفه. رائع ، أليس كذلك؟

ما هي السمات التي يمكنني استخدامها؟

يمكن استخدام السمات أدناه لـ العلامة:

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

إذن ما هي القيود؟ هناك دائما مشكلة ، أليس كذلك؟

لا يوجد دعم لبرنامج Internet Explorer

لن يعمل هذا الأكورديون HTML5 فقط في أي إصدار من Internet Explorer. إذا كان عليك أن تدعم IE11 ، فسيتعين عليك استخدام حل احتياطي مختلف باستخدام JQuery. جميع المتصفحات الأخرى تدعم و .

لا توجد رسوم متحركة أو انتقالات مخصصة

بينما يمكنك تعديل المظهر وتصميمه (كما هو موضح أعلاه) ، لن تتمكن من القيام بأي نصوص لكشف الحركات أو الانتقالات. إذا كنت ترغب في القيام بذلك ، فستحتاج إلى حل أكورديون CSS / JSS آخر.

قارئات الشاشة وإمكانية الوصول

هذا أصلي HTML5 ويجب أن يكون متاحًا ولكن تم اكتشاف أن النص المكتشف الفعلي لا يتم الإعلان عنه دائمًا بشكل صحيح بواسطة قارئ الشاشة.

المراجع:

نبذة عن الكاتب

مات أليغرين

ماتياس آلغرين هو الرئيس التنفيذي ومؤسس Website Rating، توجيه فريق عالمي من المحررين والكتاب. حاصل على درجة الماجستير في علم المعلومات وإدارتها. تمحورت حياته المهنية حول تحسين محركات البحث (SEO) بعد تجارب تطوير الويب المبكرة أثناء الجامعة. مع أكثر من 15 عامًا في تحسين محركات البحث والتسويق الرقمي وتطوير الويب. ويشمل تركيزه أيضًا أمن مواقع الويب، كما يتضح من خلال شهادة في الأمن السيبراني. هذه الخبرة المتنوعة تدعم قيادته في Website Rating.

البقاء على علم! اشترك في صحيفتنا الإخبارية
اشترك الآن واحصل على وصول مجاني إلى أدلة وأدوات وموارد المشتركين فقط.
يمكنك إلغاء الاشتراك في أي وقت. بياناتك آمنة.
البقاء على علم! اشترك في صحيفتنا الإخبارية
اشترك الآن واحصل على وصول مجاني إلى أدلة وأدوات وموارد المشتركين فقط.
يمكنك إلغاء الاشتراك في أي وقت. بياناتك آمنة.
مشاركة على ...