آکاردئون

پیش فرض آکاردئون

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body, though the transition does limit overflow.

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body, though the transition does limit overflow.


<div class="accordion" id="accordionExample">
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				آیتم آکاردئون #1
			</button>
		</h2>
		<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی اولین مورد است.</strong> به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
				آیتم آکاردئون #2
			</button>
		</h2>
		<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی اولین مورد است.</strong> به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
				آیتم آکاردئون #3
		</button>
		</h2>
		<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی اولین مورد است.</strong> به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>
</div>

آکاردئون فلاش

محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن .accordion-flush کلاس این بدنه آکاردئونی اولین مورد است.

محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن .accordion-flush کلاس این بدنه آکاردئونی اولین مورد است.

محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن .accordion-flush کلاس این بدنه آکاردئونی سومین مورد است. هیچ چیز هیجان‌انگیزی در اینجا از نظر محتوا اتفاق نمی‌افتد، فقط پر کردن فضا برای اینکه حداقل در نگاه اول، کمی بیشتر نمایانگر این باشد که در یک برنامه دنیای واقعی چگونه به نظر می‌رسد.


<div class="accordion accordion-flush" id="accordionFlushExample">
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
				آیتم آکاردئون #1
			</button>
		</h2>
		<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				<p>محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن <code>.accordion-flush</code> کلاس این بدنه آکاردئونی اولین مورد است.</p>
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
				آیتم آکاردئون #2
			</button>
		</h2>
		<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				<p>محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن <code>.accordion-flush</code> کلاس این بدنه آکاردئونی مورد دوم است. بیایید تصور کنیم که این با محتوای واقعی پر شده است.</p>
			</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" 	aria-controls="flush-collapseThree">
				آیتم آکاردئون #3
			</button>
		</h2>
		<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">
				<p>محتوای متغیر برای این آکاردئون، که در نظر گرفته شده برای نشان دادن <code>کلاس این بدنه آکاردئونی سومین مورد است. هیچ چیز هیجان‌انگیزی در اینجا از نظر محتوا اتفاق نمی‌افتد، فقط پر کردن فضا برای اینکه حداقل در نگاه اول، کمی بیشتر نمایانگر این باشد که در یک برنامه دنیای واقعی چگونه به نظر می‌رسد.</p>
			</div>
		</div>
	</div>
</div>

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

این بدنه آکاردئونی اولین مورد است. به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی مورد دوم است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.

این بدنه آکاردئونی سومین مورد است. به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد .accordion-body، اگرچه این انتقال سرریز را محدود می کند.


<div class="accordion" id="accordionPanelsStayOpenExample">
	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
				آیتم آکاردئون #1
			</button>
		</h2>

		<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی اولین مورد است.</strong> به طور پیش فرض نشان داده می شود، تا زمانی که افزونه collapse کلاس های مناسبی را که برای استایل دادن به هر عنصر استفاده می کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>

	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
				آیتم آکاردئون #2
			</button>
		</h2>

		<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی مورد دوم است.</strong> به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>

	<div class="accordion-item">
		<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
				آیتم آکاردئون #3
			</button>
		</h2>

		<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
			<div class="accordion-body">
				<p><strong>این بدنه آکاردئونی سومین مورد است.</strong> به طور پیش‌فرض پنهان می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسبی را که برای استایل دادن به هر عنصر استفاده می‌کنیم اضافه کند. این کلاس ها ظاهر کلی و همچنین نمایش و پنهان شدن از طریق انتقال CSS را کنترل می کنند. شما می توانید هر یک از این موارد را با CSS سفارشی یا نادیده گرفتن متغیرهای پیش فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می تواند درون آن قرار گیرد <code>.accordion-body</code>، اگرچه این انتقال سرریز را محدود می کند.</p>
			</div>
		</div>
	</div>
</div>