إنشاء HTML Accordion -> إخفاء وكشف المحتوى بدون JS / CSS

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

• و علامات 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 آخر.