مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

گرنے

چند کلاسز اور ہمارے JavaScript پلگ انز کے ساتھ اپنے پروجیکٹ میں مواد کی مرئیت کو ٹوگل کریں۔

یہ کیسے کام کرتا ہے

کولپس جاوا اسکرپٹ پلگ ان مواد کو دکھانے اور چھپانے کے لیے استعمال کیا جاتا ہے۔ بٹن یا اینکرز کو محرکات کے طور پر استعمال کیا جاتا ہے جو آپ کے ٹوگل کرنے والے مخصوص عناصر کے ساتھ میپ کیے جاتے ہیں۔ کسی عنصر کو ختم کرنے heightسے اس کی موجودہ قدر سے 0. یہ دیکھتے ہوئے کہ CSS اینیمیشن کو کیسے ہینڈل کرتا ہے، آپ paddingکسی .collapseعنصر پر استعمال نہیں کر سکتے۔ اس کے بجائے، کلاس کو ایک آزاد ریپنگ عنصر کے طور پر استعمال کریں۔

prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

مثال

کلاس تبدیلیوں کے ذریعے کسی اور عنصر کو دکھانے اور چھپانے کے لیے نیچے دیئے گئے بٹنوں پر کلک کریں:

  • .collapseمواد چھپاتا ہے
  • .collapsingٹرانزیشن کے دوران لاگو کیا جاتا ہے
  • .collapse.showمواد دکھاتا ہے۔

data-bs-targetعام طور پر، ہم انتساب کے ساتھ بٹن استعمال کرنے کی تجویز کرتے ہیں۔ اگرچہ معنوی نقطہ نظر سے تجویز نہیں کی جاتی ہے، آپ hrefانتساب (اور a role="button") کے ساتھ ایک لنک بھی استعمال کر سکتے ہیں۔ دونوں صورتوں میں، data-bs-toggle="collapse"ضروری ہے.

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

متعدد اہداف

A <button>یا ایک سے زیادہ عناصر کو اپنے یا انتساب <a>میں سلیکٹر کے ساتھ حوالہ دے کر دکھا اور چھپا سکتا ہے۔ ایک سے زیادہ یا کسی عنصر کو دکھا اور چھپا سکتے ہیں اگر وہ ہر ایک اسے اپنے یا انتساب کے ساتھ حوالہ دیتے ہیں۔hrefdata-bs-target<button><a>hrefdata-bs-target

Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

رسائی

aria-expandedکنٹرول عنصر میں شامل کرنا یقینی بنائیں ۔ یہ وصف واضح طور پر اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز کے کنٹرول سے منسلک ٹوٹنے والے عنصر کی موجودہ حالت کو واضح طور پر بتاتا ہے۔ اگر ٹوٹنے والا عنصر بطور ڈیفالٹ بند ہے، تو کنٹرول عنصر پر موجود انتساب کی قدر ہونی چاہیے aria-expanded="false"۔ اگر آپ نے showکلاس کا استعمال کرتے ہوئے کلیپس ایبل عنصر کو بطور ڈیفالٹ کھولنے کے لیے سیٹ کیا ہے، aria-expanded="true"تو اس کے بجائے کنٹرول پر سیٹ کریں۔ پلگ ان خود بخود اس انتساب کو کنٹرول پر ٹوگل کر دے گا کہ آیا ٹوٹنے والا عنصر کھولا یا بند ہوا ہے یا نہیں (جاوا اسکرپٹ کے ذریعے، یا اس وجہ سے کہ صارف نے دوسرے کنٹرول عنصر کو بھی اسی ٹوٹنے والے عنصر سے منسلک کیا ہے)۔ اگر کنٹرول عنصر کا HTML عنصر بٹن نہیں ہے (مثال کے طور پر، an <a>یا <div>)، وصفrole="button"عنصر میں شامل کیا جانا چاہئے.

اگر آپ کا کنٹرول عنصر کسی ایک ٹوٹنے کے قابل عنصر کو نشانہ بنا رہا ہے - یعنی data-bs-targetانتساب ایک idسلیکٹر کی طرف اشارہ کر رہا ہے - تو آپ کو aria-controlsکنٹرول عنصر میں انتساب شامل کرنا چاہیے، جس idمیں ٹوٹنے والا عنصر شامل ہو۔ جدید اسکرین ریڈرز اور اسی طرح کی معاون ٹیکنالوجیز اس وصف کا استعمال صارفین کو اضافی شارٹ کٹ فراہم کرنے کے لیے کرتی ہیں تاکہ وہ خود ہی ٹوٹنے والے عنصر پر براہ راست تشریف لے جائیں۔

نوٹ کریں کہ بوٹسٹریپ کا موجودہ نفاذ WAI-ARIA تصنیف کی مشق 1.1 accordion پیٹرن میں بیان کردہ مختلف اختیاری کی بورڈ تعاملات کا احاطہ نہیں کرتا ہے - آپ کو اپنی مرضی کے مطابق JavaScript کے ساتھ ان کو شامل کرنے کی ضرورت ہوگی۔

سس

متغیرات

$transition-collapse:         height .35s ease;

کلاسز

کولپس ٹرانزیشن کلاسز اس میں مل سکتی ہیں scss/_transitions.scssکیونکہ یہ متعدد اجزاء (کولپس اور ایکارڈین) میں مشترکہ ہیں۔

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);
}

استعمال

کولپس پلگ ان ہیوی لفٹنگ کو سنبھالنے کے لیے چند کلاسز کا استعمال کرتا ہے:

  • .collapseمواد کو چھپاتا ہے
  • .collapse.showمواد دکھاتا ہے۔
  • .collapsingمنتقلی شروع ہونے پر شامل کیا جاتا ہے، اور ختم ہونے پر ہٹا دیا جاتا ہے۔

یہ کلاسز میں مل سکتی ہیں _transitions.scss۔

ڈیٹا اوصاف کے ذریعے

خود بخود ایک یا زیادہ ٹوٹنے والے عناصر کا کنٹرول تفویض کرنے کے لیے عنصر میں صرف data-bs-toggle="collapse"اور a شامل کریں ۔ data-bs-targetانتساب ایک CSS سلیکٹر کو قبول کرتا ہے جس data-bs-targetپر کولپس کو لاگو کیا جائے۔ کلاس collapseکو ٹوٹنے والے عنصر میں شامل کرنا یقینی بنائیں۔ اگر آپ اسے ڈیفالٹ کھولنا چاہتے ہیں تو اضافی کلاس شامل کریں show۔

اکارڈیئن نما گروپ مینجمنٹ کو ٹوٹنے کے قابل علاقے میں شامل کرنے کے لیے، ڈیٹا وصف شامل کریں data-bs-parent="#selector"۔ اس کو عملی شکل میں دیکھنے کے لیے ڈیمو سے رجوع کریں۔

جاوا اسکرپٹ کے ذریعے

اس کے ساتھ دستی طور پر فعال کریں:

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

اختیارات

اختیارات کو ڈیٹا انتساب یا JavaScript کے ذریعے منتقل کیا جا سکتا ہے۔ ڈیٹا کی خصوصیات کے لیے، آپشن کا نام شامل کریں data-bs-، جیسا کہ میں data-bs-parent=""۔

نام قسم طے شدہ تفصیل
parent سلیکٹر | jQuery آبجیکٹ | DOM عنصر false اگر پیرنٹ فراہم کیا جاتا ہے، تو اس ٹوٹنے کے قابل آئٹم کے دکھائے جانے پر متعین پیرنٹ کے تحت تمام ٹوٹنے والے عناصر بند ہو جائیں گے۔ card(روایتی ایکارڈین رویے کی طرح - یہ کلاس پر منحصر ہے )۔ انتساب کو ٹارگٹ کولاپس ایبل ایریا پر سیٹ کرنا ہوگا۔
toggle بولین true انووکیشن پر ٹوٹنے والے عنصر کو ٹوگل کرتا ہے۔

طریقے

غیر مطابقت پذیر طریقے اور ٹرانزیشن

تمام API طریقے غیر مطابقت پذیر ہیں اور ایک منتقلی شروع کرتے ہیں ۔ منتقلی شروع ہوتے ہی وہ کال کرنے والے کے پاس واپس آ جاتے ہیں لیکن اس کے ختم ہونے سے پہلے ۔ اس کے علاوہ، منتقلی کے جزو پر میتھڈ کال کو نظر انداز کر دیا جائے گا ۔

مزید معلومات کے لیے ہماری جاوا اسکرپٹ دستاویزات دیکھیں ۔

آپ کے مواد کو ایک ٹوٹنے کے قابل عنصر کے طور پر فعال کرتا ہے۔ اختیاری اختیارات کو قبول کرتا ہے object۔

آپ کنسٹرکٹر کے ساتھ کولپس مثال بنا سکتے ہیں، مثال کے طور پر:

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
طریقہ تفصیل
toggle دکھائے جانے یا چھپنے کے لیے ٹوٹنے کے قابل عنصر کو ٹوگل کرتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے یا چھپنے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (یعنی واقعہ shown.bs.collapseیا hidden.bs.collapseواقعہ ہونے سے پہلے)۔
show ایک ٹوٹنے والا عنصر دکھاتا ہے۔ کالپس ایبل عنصر کے حقیقت میں دکھائے جانے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (مثال کے طور پر، shown.bs.collapseواقعہ پیش آنے سے پہلے)۔
hide ایک ٹوٹنے والا عنصر چھپاتا ہے۔ کالیپس ایبل عنصر کے حقیقت میں پوشیدہ ہونے سے پہلے کال کرنے والے کے پاس واپس آجاتا ہے (مثلاً، hidden.bs.collapseواقعہ ہونے سے پہلے)۔
dispose ایک عنصر کے خاتمے کو تباہ کرتا ہے۔ (DOM عنصر پر ذخیرہ شدہ ڈیٹا کو ہٹاتا ہے)
getInstance جامد طریقہ جو آپ کو DOM عنصر سے وابستہ خاتمے کی مثال حاصل کرنے کی اجازت دیتا ہے، آپ اسے اس طرح استعمال کر سکتے ہیں:bootstrap.Collapse.getInstance(element)
getOrCreateInstance جامد طریقہ جو کسی DOM عنصر سے وابستہ ٹوٹنے کی مثال واپس کرتا ہے یا اس کی ابتدا نہ ہونے کی صورت میں ایک نیا بناتا ہے۔ آپ اسے اس طرح استعمال کر سکتے ہیں:bootstrap.Collapse.getOrCreateInstance(element)

تقریبات

بوٹسٹریپ کی گرنے والی کلاس گرنے کی فعالیت کو جوڑنے کے لیے چند واقعات کو بے نقاب کرتی ہے۔

واقعہ کی قسم تفصیل
show.bs.collapse یہ واقعہ فوری طور پر فائر ہو جاتا ہے جب showمثال کا طریقہ کہا جاتا ہے۔
shown.bs.collapse اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب ایک گرنے والے عنصر کو صارف کے لیے مرئی بنایا جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
hide.bs.collapse اس واقعہ کو فوری طور پر برطرف کر دیا جاتا ہے جب hideطریقہ کار کہا جاتا ہے۔
hidden.bs.collapse اس ایونٹ کو اس وقت برطرف کیا جاتا ہے جب گرنے والے عنصر کو صارف سے چھپایا جاتا ہے (CSS ٹرانزیشن مکمل ہونے کا انتظار کرے گا)۔
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})