Iconly/Curved/Arrow - Left 2Iconly/Curved/Arrow - CircleIconly/Curved/Arrow - SearchIconly/Curved/Arrow - cubeIconly/Curved/Arrow - checkIconly/Curved/Arrow - pieIconly/Curved/Arrow - plusIconly/Curved/Arrow - minusIconly/Curved/Arrow - heartIconly/Curved/Arrow - Arrow-downIconly/Curved/Arrow - WeatherIconly/Curved/Arrow - StarIconly/Curved/Home

آکاردئون

  2. کیت های رابط کاربری
  3. آکاردئون

آکاردئون ساده

با استفاده از کلاس .accordion می‌توانید محتوای آکاردئون را باز یا بسته کنید.

طراحی وب اهداف یک وب‌سایت یا صفحه وب را مشخص می‌کند و دسترسی برای همه کاربران ممکن را فراهم می‌سازد. این فرایند شامل سازماندهی محتوا و تصاویر در چندین صفحه و یکپارچه‌سازی برنامه‌ها و سایر عناصر تعاملی است.

بهینه‌سازی موتور جستجو (SEO): بهینه‌سازی موتور جستجو روشی برای افزایش احتمال یافت شدن یک وب‌سایت توسط موتورهای جستجو است. طراحی وب اطلاعات را به گونه‌ای کدگذاری می‌کند که موتورهای جستجو قادر به خواندن آن باشند. این می‌تواند کسب‌وکار را ارتقا دهد زیرا سایت در صفحات نتایج برتر ظاهر می‌شود و به افراد کمک می‌کند آن را پیدا کنند.

واکنش‌گرایی موبایل: واکنش‌گرایی موبایل ویژگی‌ای است که وب‌سایت را قادر می‌سازد روی دستگاه‌های موبایل نمایش داده شود و چیدمان و نسبت‌های آن به گونه‌ای باشد که خوانا باشد. طراحی وب اطمینان می‌دهد سایت‌ها به راحتی از طریق موبایل مشاهده و پیمایش شوند. وقتی یک وب‌سایت به خوبی طراحی شده و واکنش‌گرا باشد، مشتریان می‌توانند به راحتی با کسب‌وکار ارتباط برقرار کنند.

افزایش فروش: افزایش تعداد اقلام فروخته شده یا جذب مشتریان فعال بیشتر از اهداف یک وب‌سایت جذاب است. از آنجا که طراحی وب به مشتریان هدف و موتورهای جستجو می‌رسد، به کسب‌وکار کمک می‌کند تبدیل‌ها را در سایت خود انجام دهد و فروش خود را افزایش دهد.

فرایند طراحی وب به طراحان اجازه می‌دهد تا با هر ترجیحی سازگار شوند و راه‌حل‌های مؤثری ارائه دهند. بسیاری از اجزای استاندارد در هر طراحی وب وجود دارند، از جمله:

  • --> چیدمان
  • --> تصاویر
  • --> سلسله‌مراتب بصری
  • --> طرح رنگ
  • --> تایپوگرافی
  • --> ناوبری
  • --> قابلیت خواندن
  • --> محتوا
<div class="accordion dark-accordion" id="simpleaccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed accordion-light-primary text-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">طراحان وب چه کاری انجام می‌دهند؟<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>طراحی وب<em class="text-danger"> اهداف</em> یک وب‌سایت یا صفحه وب را مشخص می‌کند و دسترسی به آن را برای همه کاربران بالقوه تسهیل می‌کند. این فرایند شامل سازماندهی محتوا و تصاویر در چندین صفحه و یکپارچه‌سازی برنامه‌ها و سایر عناصر تعاملی است.</p>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="left-collapseTwo">کاربرد طراحی وب چیست؟ <i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p class="mb-3"><strong> بهینه‌سازی موتور جستجو: </strong> بهینه‌سازی موتور جستجو (SEO) روشی است برای افزایش احتمال یافت شدن وب‌سایت توسط موتورهای جستجو. طراحی وب اطلاعات را به گونه‌ای کدگذاری می‌کند که موتورهای جستجو قادر به خواندن آن باشند. این کار می‌تواند کسب‌وکار را ارتقا دهد زیرا سایت در صفحات برتر نتایج جستجو نمایش داده می‌شود و به افراد کمک می‌کند آن را پیدا کنند.</p>
<p class="mb-3"><strong> واکنش‌گرایی موبایل: </strong> واکنش‌گرایی موبایل ویژگی‌ای است که وب‌سایت را قادر می‌سازد روی دستگاه‌های موبایل نمایش داده شود و چیدمان و نسبت‌های آن به گونه‌ای باشد که خوانا باشد. طراحی وب اطمینان می‌دهد سایت‌ها به راحتی از طریق موبایل مشاهده و پیمایش شوند. وقتی وب‌سایت به خوبی طراحی شده و واکنش‌گرا باشد، مشتریان می‌توانند به آسانی با کسب‌وکار ارتباط برقرار کنند.</p>
<p class="mb-3"><strong> افزایش فروش: </strong> افزایش تعداد اقلام فروخته شده یا جذب مشتریان فعال بیشتر از اهداف یک وب‌سایت جذاب است. طراحی وب با رسیدن به مشتریان هدف و موتورهای جستجو، به کسب‌وکار کمک می‌کند تبدیل‌ها را در سایت انجام دهد و فروش خود را بهبود بخشد.</p>
</div>
</div>
</div>
<div class="accordion-item accordion-wrapper">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed accordion-light-primary text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="left-collapseThree">عناصر طراحی وب چیستند؟<i class="iconly-Arrow-Down-2 icli ms-auto icon"> </i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>فرایند طراحی وب به طراحان اجازه می‌دهد تا با هر ترجیحی سازگار شوند و راه‌حل‌های مؤثری ارائه دهند. بسیاری از اجزای استاندارد در هر طراحی وب وجود دارند، از جمله:</p>
<ul class="d-flex flex-column gap-2 accordions-content">
<li>--> چیدمان</li>
<li>--> تصاویر</li>
<li>--> سلسله‌مراتب بصری</li>
<li>--> طرح رنگ</li>
<li>--> تایپوگرافی</li>
<li>--> ناوبری</li>
<li>--> قابلیت خواندن</li>
<li>--> محتوا</li>
</ul>
</div>
</div>
</div>
</div>

آکاردئون هم‌سطح

با افزودن .accordion-flush پس‌زمینه، حاشیه و سایر استایل‌های پیش‌فرض حذف می‌شوند.

  • --> بوت‌استرپ محبوب‌ترین فریم‌ورک HTML، CSS و جاوااسکریپت برای توسعه وب‌سایت‌های واکنش‌گرا و موبایل فرندلی است.
  • --> کاملاً رایگان برای دانلود و استفاده است.

  • اول و مهم‌تر از همه، بوت‌استرپ آسان برای یادگیری است و به دلیل محبوبیتش، آموزش‌ها و انجمن‌های آنلاین زیادی برای کمک به شروع وجود دارد.
  • یکی از دلایل محبوبیت بوت‌استرپ بین توسعه‌دهندگان و طراحان وب این است که ساختار فایل ساده‌ای دارد. فایل‌ها برای دسترسی آسان کامپایل شده‌اند و تنها دانش پایه HTML، CSS و JS برای ویرایش آن‌ها کافی است.
  • می‌توانید از قالب‌های سیستم‌های مدیریت محتوا برای یادگیری استفاده کنید، مثلاً اکثر قالب‌های وردپرس با بوت‌استرپ توسعه یافته‌اند که برای هر توسعه‌دهنده مبتدی قابل دسترسی است.
  • برای افزایش سرعت بارگذاری صفحات سایت، بوت‌استرپ فایل‌های CSS و JS را فشرده می‌کند. همچنین بوت‌استرپ ثباتی در نحو بین وب‌سایت‌ها و توسعه‌دهندگان حفظ می‌کند که برای پروژه‌های تیمی ایده‌آل است.

  • بوت‌استرپ نمایش و واکنش‌گرایی تصاویر را با قوانین پیش‌فرض HTML و CSS مدیریت می‌کند.
  • با افزودن کلاس .img-responsive تصاویر به‌طور خودکار بر اساس اندازه صفحه کاربر تغییر اندازه می‌دهند که به بهبود عملکرد سایت کمک می‌کند.
  • بوت‌استرپ کلاس‌های اضافی مانند .img-circle و .img-rounded نیز ارائه می‌دهد که شکل تصاویر را تغییر می‌دهد.
<div class="card-body">
<div class="accordion accordion-flush dark-accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed text-success accordion-light-success active" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">بوت‌استرپ چیست؟</button>
</h2>
<div class="accordion-collapse collapse show" id="flush-collapseOne" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-1 accordions-content">
<li>--> بوت‌استرپ محبوب‌ترین فریم‌ورک HTML، CSS و JavaScript برای توسعه وب‌سایت واکنش‌گرا و موبایل‌فرندلی است.</li>
<li>--> دانلود و استفاده از آن کاملاً رایگان است.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed text-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">چرا باید از بوت‌استرپ استفاده کنیم؟</button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseTwo" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>اول و مهم‌تر از همه، بوت‌استرپ آسان برای یادگیری است. به دلیل محبوبیت آن، آموزش‌ها و انجمن‌های آنلاین زیادی برای شروع وجود دارد.</li>
<li>یکی از دلایل محبوبیت بوت‌استرپ در بین توسعه‌دهندگان و طراحان وب، ساختار فایل ساده آن است. فایل‌ها برای دسترسی آسان کامپایل شده‌اند و تنها نیاز به دانش پایه HTML، CSS و JS برای ویرایش دارند.</li>
<li>همچنین می‌توانید از قالب‌های سیستم‌های مدیریت محتوا به‌عنوان ابزار یادگیری استفاده کنید. برای مثال، بیشتر قالب‌های وردپرس با بوت‌استرپ توسعه یافته‌اند که هر توسعه‌دهنده تازه‌کار می‌تواند به آن‌ها دسترسی داشته باشد.</li>
<li>برای افزایش سرعت بارگذاری سایت، بوت‌استرپ فایل‌های CSS و JavaScript را فشرده می‌کند. علاوه بر این، بوت‌استرپ ثبات در نحو بین وب‌سایت‌ها و توسعه‌دهندگان را حفظ می‌کند که برای پروژه‌های تیمی ایده‌آل است.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed text-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">سیستم تصاویر بوت‌استرپ</button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseThree" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>بوت‌استرپ نمایش و واکنش‌گرایی تصاویر را با قوانین از پیش تعریف‌شده HTML و CSS مدیریت می‌کند.</li>
<li>افزودن کلاس .img-responsive باعث می‌شود تصاویر به‌طور خودکار بر اساس اندازه صفحه کاربر تغییر اندازه دهند که به بهینه‌سازی عملکرد وب‌سایت کمک می‌کند.</li>
<li>بوت‌استرپ همچنین کلاس‌های اضافی مانند .img-circle و .img-rounded را فراهم می‌کند که شکل تصاویر را تغییر می‌دهند.</li>
</ul>
</div>
</div>
</div>
</div>
</div>

آکاردئون چندتایی

از href در data-bs-toggle attribute برای نمایش و مخفی‌کردن چندین المان استفاده کنید.

افزونه جاوااسکریپت Collapse برای نمایش و مخفی‌کردن محتوا استفاده می‌شود. دکمه‌ها یا لینک‌ها به‌عنوان محرک عمل می‌کنند که به المان‌های خاصی متصل هستند. جمع‌شدن یک المان باعث انیمیشن ارتفاع آن از مقدار فعلی به صفر می‌شود. با توجه به نحوه‌ی مدیریت انیمیشن‌ها در CSS، نمی‌توانید از padding روی المان .collapse استفاده کنید. در عوض از یک کلاس مستقل به‌عنوان المان پوششی استفاده نمایید.
این متن بدنه‌ی اولین آیتم آکاردئون است. به‌طور پیش‌فرض نمایش داده می‌شود تا زمانی که افزونه‌ی collapse کلاس‌های لازم را اضافه کند که ما برای استایل‌دهی به هر المان از آن‌ها استفاده می‌کنیم. این کلاس‌ها ظاهر کلی و همچنین نمایش و مخفی‌شدن را از طریق ترنزیشن‌های CSS کنترل می‌کنند. می‌توانید هر کدام از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. 
<div class="card-body">
<div class="common-flex"><a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">نمایش/مخفی‌کردن المان اول</a>
<button class="btn btn-warning text-white" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">نمایش/مخفی‌کردن المان دوم</button>
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">نمایش/مخفی‌کردن هر دو المان</button>
</div>
<div class="row d-flex">
<div class="col-xl-6">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary"><span>افزونه جاوااسکریپت Collapse برای نمایش و مخفی‌کردن محتوا استفاده می‌شود...</span></div>
</div>
</div>
<div class="col-xl-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-warning"><span>این متن بدنه‌ی اولین آیتم آکاردئون است...</span></div>
</div>
</div>
</div>
</div>

آکاردئون همراه با آیکون‌ها

از icons با .accordion استفاده کنید تا ظاهر بهتری داشته باشد.

"این صفحه ممکن است طبق انتظار عمل نکند زیرا مرورگر Internet Explorer ویندوز برای بارگذاری کنترل‌های ActiveX بدون امضا پیکربندی نشده است." یا "آیا اجازه می‌دهید این صفحه یک ActiveX بدون امضا نصب کند؟ انجام این کار از منابع نامطمئن ممکن است به رایانه شما آسیب برساند." (هر دو به‌عنوان شرایطی مطرح می‌شوند که می‌توانند مشکلاتی در آینده ایجاد کنند.)

  • شما همان امکاناتی را در Chat و Chat در Gmail دریافت می‌کنید، اما تجربه‌ی یکپارچه Gmail یک مکان مرکزی برای برقراری ارتباط با دوستان، خانواده یا همکاران بین ایمیل‌ها فراهم می‌کند.
  • چت: زمانی استفاده کنید که ترجیح می‌دهید یک تجربه‌ی چت اختصاصی داشته باشید و مشکلی با جابجایی بین برنامه‌های مختلف ندارید.

  • ۱) یک سبک تورفتگی انتخاب کنید و همیشه همان را حفظ کنید.
  • ۲) توضیحات (کامنت) بنویسید.
  • ۳) از طرح نام‌گذاری یکسان استفاده کنید.
  • ۴) کد را تکرار نکنید.
  • ۵) از نوشتن خطوط کد خیلی طولانی پرهیز کنید.
  • ۶) یک کار بزرگ را به بخش‌های کوچک‌تر تقسیم کنید.
  • ۷) برنامه را در فایل‌های کوچک‌تر سازماندهی کنید.
  • ۸) کدی بنویسید که هم هوشمندانه باشد و هم قابل خواندن.
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne"><i class="fa-regular fa-bell"></i>در ارتباط باشید<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseOne" aria-labelledby="panelsStayOpen-headingOne">
<div class="accordion-body">
<p><em class="text-danger">"این صفحه ممکن است طبق انتظار عمل نکند زیرا مرورگر Internet Explorer ویندوز برای بارگذاری کنترل‌های ActiveX بدون امضا پیکربندی نشده است."</em> یا "آیا اجازه می‌دهید این صفحه یک ActiveX بدون امضا نصب کند؟ ..."</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"><i class="fa-regular fa-comment"></i>گفتگو با دیگران<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>شما همان امکاناتی را در Chat و Chat در Gmail دریافت می‌کنید ...</li>
<li><strong>چت:</strong> زمانی استفاده کنید که ...</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed gap-2 accordion-light-secondary active text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"><i class="fa-regular fa-square-check"></i>روش درست کدنویسی<i class="iconly-Arrow-Down-2 icli ms-auto icon"></i></button>
</h2>
<div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>۱) یک سبک تورفتگی انتخاب کنید ...</li>
<li>۲) توضیحات (کامنت) بنویسید.</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</div>

آکاردئون با حاشیه

تنظیم حاشیه بیرونی آکاردئون با استفاده از کلاس .accordion-wrapper.

طراحی وب اهداف یک وب‌سایت یا صفحه وب را مشخص کرده و دسترسی‌پذیری برای همه کاربران بالقوه را ارتقا می‌دهد. این فرآیند شامل سازمان‌دهی محتوا و تصاویر در مجموعه‌ای از صفحات و ادغام برنامه‌ها و عناصر تعاملی دیگر است.

  • بهینه‌سازی موتور جستجو: بهینه‌سازی موتور جستجو (SEO) روشی برای افزایش احتمال یافتن وب‌سایت توسط موتورهای جستجو است. طراحی وب اطلاعات را به گونه‌ای کدگذاری می‌کند که موتورهای جستجو بتوانند آن را بخوانند. این کار می‌تواند باعث رونق کسب‌وکار شود چون وب‌سایت در نتایج بالای جستجو نمایش داده می‌شود و افراد راحت‌تر آن را پیدا می‌کنند.
  • واکنش‌گرایی در موبایل: واکنش‌گرایی در موبایل ویژگی‌ای است که به وب‌سایت اجازه می‌دهد در دستگاه‌های موبایل به‌درستی نمایش داده شده و متناسب با ابعاد آن‌ها سازگار شود. طراحی وب تضمین می‌کند که سایت‌ها در موبایل به‌راحتی دیده و پیمایش شوند. وقتی وب‌سایتی طراحی خوب و واکنش‌گرا داشته باشد، مشتریان به‌راحتی به کسب‌وکار دسترسی پیدا می‌کنند.
  • افزایش فروش: افزایش تعداد کالاهای فروخته‌شده یا جذب مشتریان فعال بیشتر از اهداف یک وب‌سایت موفق است. با دسترسی طراحی وب به مشتریان هدف و موتورهای جستجو، کسب‌وکار می‌تواند نرخ تبدیل خود را افزایش داده و فروش بهتری داشته باشد.

  • فرآیند طراحی وب به طراحان امکان می‌دهد با هر سلیقه‌ای سازگار شده و راه‌حل‌های مؤثری ارائه دهند. بسیاری از مؤلفه‌های استاندارد در هر طراحی وب وجود دارد، از جمله:
  • --> طرح‌بندی
  • --> تصاویر
  • --> سلسله‌مراتب بصری
  • --> ترکیب رنگ
  • --> تایپوگرافی
  • --> ناوبری
  • --> خوانایی
  • --> محتوا
[...]

آکاردئون افقی

کلاس .collapse-horizontal را اضافه کنید تا به‌جای ارتفاع، تغییر عرض انجام شود و برای المنت فرزند مستقیم یک عرض تنظیم کنید.

افزونه collapse از جمع شدن افقی نیز پشتیبانی می‌کند. کلاس .collapse-horizontal را اضافه کنید تا تغییر عرض به‌جای ارتفاع انجام شود و برای فرزند مستقیم یک عرض مشخص کنید. می‌توانید از Sass سفارشی خود استفاده کنید، استایل‌های inline بنویسید یا از ابزارهای عرض ما استفاده کنید. 
<button class="btn btn-success" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">تغییر وضعیت عرض</button>

آکاردئون جمع‌شونده

از یک لینک با ویژگی href استفاده کنید (و role="button"). در هر دو حالت، ویژگی data-bs-toggle="collapse" الزامی است.

محتوای نمونه برای کامپوننت collapse. این پنل به‌طور پیش‌فرض مخفی است اما زمانی‌که کاربر محرک مربوطه را فعال کند نمایش داده می‌شود. 
<a class="btn btn-info" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">لینک با href</a>
                <button class="btn btn-info" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">دکمه با data-bs-target</button>