جی کوئی موبائل فولڈر

بلوک‌های محتوای تا شوند

تا شوند (Collapsibles) به شما امکان می‌دهد که محتوا را مخفی یا نمایش دهید - برای ذخیره اطلاعات جزئی بسیار مفید است.

برای ایجاد بلوک‌های محتوای تا شوند، به یک قالب data-role="collapsible" اختصاص دهید. در قالب (div)، یک عنصر عنوان (h1-h6) اضافه کنید، سپس هر نوع برچسب HTML که می‌خواهید باز کنید:

مثال

<div data-role="collapsible">
  <h1>من را کلیک کنید - می‌توانم تا شوند!</h1>
  <p>من محتوای تا شوند هستم.</p>
</div>

آپ خود بچپس بکوشید

به صورت پیش‌فرض، این محتوا بسته است. برای باز کردن محتوا در زمان بارگذاری صفحه، از data-collapsed="false" استفاده کنید:

مثال

<div data-role="collapsible" data-collapsed="false">
  <h1>من را کلیک کنید - می‌توانم تا شوند!</h1>
  <p>حالا من به صورت پیش‌فرض باز است.</p>
</div>

آپ خود بچپس بکوشید

بلوک‌های تا شوند درونی

بلوک‌های محتوای تا شوند را می‌توان درونی کرد:

مثال

<div data-role="collapsible">
  <h1>من را کلیک کنید - می‌توانم تا شوند!</h1>
  <p>من محتوایی هستم که باز شده است.</p>
  <div data-role="collapsible">
    <h1>من را کلیک کنید - من بلوک تا شوند درونی هستم!</h1>
    <p>من محتوایی هستم که در بلوک‌های تا شوند درونی باز شده است.</p>
  </div>
</div>

آپ خود بچپس بکوشید

توجه:بلوک‌های محتوای تا شوند می‌توانند هر تعداد که می‌خواهید درونی شوند.

مجموعه‌های تا شوند

مجموعه‌های تا شوند (Collapsible sets) به مجموعه‌ای از بلوک‌های تا شوند اشاره دارد (معمولاً به عنوان فلاوت شناخته می‌شود). هنگامی که یک بلوک جدید باز می‌شود، تمام بلوک‌های دیگر بسته می‌شوند.

چندین بلوک محتوایی ایجاد کنید، سپس این بلوک‌های تا شوند را با یک قالب جدید با استفاده از data-role="collapsible-set" بپوشانید:

مثال

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>من را کلیک کنید - می‌توانم تا شوند!</h1>
    <p>من محتوایی هستم که باز شده است.</p>
  </div>
  <div data-role="collapsible">
    <h1>من را کلیک کنید - می‌توانم تا شوند!</h1>
    <p>من محتوایی هستم که باز شده است.</p>
  </div>
</div>

آپ خود بچپس بکوشید

بہت سے مثال

data-inset اٹری بیوٹ کے ذریعے ختم کردا ہے
کہیں چہرے کی کونے کو ختم کردا ہے。
data-mini کے ذریعے چھوٹا کردا ہے
کہیں چہرے کو چھوٹا کردا ہے。
data-collapsed-icon اور data-expanded-icon کے ذریعے آئیکن تبدیل کریں
کہیں چہرے کا آئیکن تبدیل کیسے کردا ہے (مقابلہ + اور - ہوتا ہے)。