كتل المحتوى قابلة للطي
Collapsibles تسمح لك لإخفاء أو إظهار المحتوى، وهو أمر مفيد لتخزين أجزاء من المعلومات.
لإنشاء كتلة للطي من المحتوى، وتعيين data-role="collapsible" السمة إلى وعاء. داخل الحاوية (div) ، إضافة رأس (H1-H6) أو عنصر أسطورة، تليها أي ترميز HTML تريد توسيعها:
مثال
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
انها محاولة لنفسك » افتراضيا، يتم إغلاق المحتوى. لتوسيع محتوى عند تحميل الصفحة، واستخدام data-collapsed="false" :
مثال
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
انها محاولة لنفسك » متداخلة انهيار كتل
كتل محتوى للطي يمكن أن تتداخل (أ لطي داخل للطي):
مثال
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div
data-role="collapsible" >
<h1>Click me - I'm a
nested collapsible block!</h1>
<p>I'm the expanded
content in the nested collapsible block.</p>
</div>
</div>
انها محاولة لنفسك » كتل محتوى للطي يمكن أن تتداخل العديد من المرات كما تريد.
مجموعات للطي
مجموعات جاهزة هي كتل قابلة للطي التي يتم تجميعها معا (غالبا ما يشار إليها باسم الأكورديون). عند فتح كتلة جديد، وجميع الكتل الأخرى على مقربة.
إنشاء عدة كتل المحتوى قابلة للطي، وثم لف حاوية جديدة مع بيانات دور = "collapsibleset" حول كتل قابلة للطي:
مثال
<div data-role="collapsibleset" >
<div
data-role="collapsible">
<h1>Click me - I'm
collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the
expanded content.</p>
</div>
</div>
انها محاولة لنفسك » المزيد من الأمثلة
المنبثقة للطي
كيفية إنشاء منبثقة للطي.
إزالة زاوية مستديرة مع data-inset السمة
كيفية إزالة زوايا مدورة وإضافة إلى عرض كامل على collapsibles.
صغر collapsibles مع data-mini السمة
كيفية جعل collapsibles أصغر.
تغيير رمز مع رمز-انهار البيانات ورمز المملوءة البيانات
كيفية تغيير رمز من collapsibles (الافتراضي + و -).
تغيير موقف رمز
كيفية تغيير موضع رمز من collapsibles (الافتراضي هو اليسار).