جعبه‌های قابل تا کردن jQuery Mobile

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

تا‌شونده‌ها (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 لبه‌های گرد را حذف کنید
چگونه لبه‌های گرد collapsibles را حذف کنیم.
با استفاده از data-mini collapsibles را کوچکتر کنید
چگونه collapsibles را کوچکتر کنیم.
با استفاده از data-collapsed-icon و data-expanded-icon آیکون را تغییر دهید
چگونه آیکون‌های collapsibles را تغییر دهیم (默认是 + و -).