آکاردئون‌ها

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

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

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

این بدن آکاردئون آیتم سوم است. به طور پیش‌فرض پنهان است، تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما از آنها برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی را کنترل می‌کنند و همچنین نمایش و پنهان‌سازی را از طریق انتقالات CSS مدیریت می‌کنند. شما می‌توانید هر یک از این موارد را با CSS سفارشی یا با لغو متغیرهای پیش‌فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می‌تواند درون .accordion-body قرار گیرد، هرچند که انتقال محدودیت‌هایی برای overflow ایجاد می‌کند. 
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <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"
            aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>این بدن آکاردئون آیتم اول است.</strong> به طور پیش‌فرض نمایش داده می‌شود، تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما از آنها برای استایل‌دهی به هر عنصر استفاده می‌کنیم.
                این کلاس‌ها ظاهر کلی را کنترل می‌کنند و همچنین نمایش و پنهان‌سازی را از طریق انتقالات CSS مدیریت می‌کنند. شما می‌توانید هر یک از این موارد را با CSS سفارشی یا با لغو متغیرهای پیش‌فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می‌تواند درون <code>.accordion-body</code> قرار گیرد، هرچند که انتقال محدودیت‌هایی برای overflow ایجاد می‌کند.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
            <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"
            aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>این بدن آکاردئون آیتم دوم است.</strong> به طور پیش‌فرض پنهان است، تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما از آنها برای استایل‌دهی به هر عنصر استفاده می‌کنیم.
                این کلاس‌ها ظاهر کلی را کنترل می‌کنند و همچنین نمایش و پنهان‌سازی را از طریق انتقالات CSS مدیریت می‌کنند. شما می‌توانید هر یک از این موارد را با CSS سفارشی یا با لغو متغیرهای پیش‌فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می‌تواند درون <code>.accordion-body</code> قرار گیرد، هرچند که انتقال محدودیت‌هایی برای overflow ایجاد می‌کند.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
            <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"
            aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>این بدن آکاردئون آیتم سوم است.</strong> به طور پیش‌فرض پنهان است، تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما از آنها برای استایل‌دهی به هر عنصر استفاده می‌کنیم.
                این کلاس‌ها ظاهر کلی را کنترل می‌کنند و همچنین نمایش و پنهان‌سازی را از طریق انتقالات CSS مدیریت می‌کنند. شما می‌توانید هر یک از این موارد را با CSS سفارشی یا با لغو متغیرهای پیش‌فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می‌تواند درون <code>.accordion-body</code> قرار گیرد، هرچند که انتقال محدودیت‌هایی برای overflow ایجاد می‌کند.
            </div>
        </div>
    </div>
</div>
آکوردیون همیشه باز

ویژگی data-bs-parent را از هر .accordion-collapse حذف کنید تا آیتم‌های آکوردیون در هنگام باز شدن یک آیتم دیگر باز بمانند.

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

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

این بدنه آیتم سوم آکوردیون است. این به صورت پیش‌فرض مخفی است، تا زمانی که پلاگین collapse کلاس‌های مناسب را اضافه کند که برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی را کنترل می‌کنند، همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS انجام می‌دهند. شما می‌توانید هر کدام از این‌ها را با CSS سفارشی یا تغییر متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل ذکر است که تقریباً هر HTMLی می‌تواند در داخل .accordion-body قرار گیرد، اگرچه انتقال محدودیت‌هایی برای overflow دارد. 
<div class="accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
            <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"
            aria-labelledby="panelsStayOpen-headingOne">
            <div class="accordion-body">
                <strong>این بدنه آیتم اول آکوردیون است.</strong> این به صورت پیش‌فرض نشان داده می‌شود، تا زمانی که پلاگین collapse کلاس‌های مناسب را اضافه کند که برای استایل‌دهی به هر عنصر استفاده می‌کنیم.
                این کلاس‌ها ظاهر کلی را کنترل می‌کنند، همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS انجام می‌دهند. همچنین قابل ذکر است که تقریباً هر HTMLی می‌تواند در داخل <code>.accordion-body</code> قرار گیرد، اگرچه انتقال محدودیت‌هایی برای overflow دارد.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
            <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"
            aria-labelledby="panelsStayOpen-headingTwo">
            <div class="accordion-body">
                <strong>این بدنه آیتم دوم آکوردیون است.</strong> این به صورت پیش‌فرض مخفی است، تا زمانی که پلاگین collapse کلاس‌های مناسب را اضافه کند که برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی را کنترل می‌کنند، همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS انجام می‌دهند. شما می‌توانید هر کدام از این‌ها را با CSS سفارشی یا تغییر متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل ذکر است که تقریباً هر HTMLی می‌تواند در داخل <code>.accordion-body</code> قرار گیرد، اگرچه انتقال محدودیت‌هایی برای overflow دارد.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="panelsStayOpen-headingThree">
            <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"
            aria-labelledby="panelsStayOpen-headingThree">
            <div class="accordion-body">
                <strong>این بدنه آیتم سوم آکوردیون است.</strong> این به صورت پیش‌فرض مخفی است، تا زمانی که پلاگین collapse کلاس‌های مناسب را اضافه کند که برای استایل‌دهی به هر عنصر استفاده می‌کنیم.
                این کلاس‌ها ظاهر کلی را کنترل می‌کنند، همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS انجام می‌دهند. شما می‌توانید هر کدام از این‌ها را با CSS سفارشی یا تغییر متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل ذکر است که تقریباً هر HTMLی می‌تواند در داخل <code>.accordion-body</code> قرار گیرد، اگرچه انتقال محدودیت‌هایی برای overflow دارد.
            </div>
        </div>
    </div>
</div>
آکوردیون فلش

برای حذف .accordion-flush پس‌زمینه پیش‌فرض، برخی از مرزها و گوشه‌های گرد، به‌طوری‌که آکوردیون‌ها از لبه به لبه والد خود به‌صورت یکپارچه نمایش داده شوند.

محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس .accordion-flush طراحی شده است. این بدنه آیتم اول آکوردیون است.

محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس .accordion-flush طراحی شده است. این بدنه آیتم دوم آکوردیون است. بیایید تصور کنیم که این با محتوای واقعی پر شده است.

محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس .accordion-flush طراحی شده است. این بدنه آیتم سوم آکوردیون است. در اینجا اتفاق خاصی از نظر محتوا نمی‌افتد، اما فقط فضا را پر می‌کند تا در نگاه اول شبیه به یک برنامه واقعی به نظر برسد.
<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <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"
            aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس <code>.accordion-flush</code> طراحی شده است.
                این بدنه آیتم اول آکوردیون است.</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
            <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"
            aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس <code>.accordion-flush</code> طراحی شده است.
                این بدنه آیتم دوم آکوردیون است. بیایید تصور کنیم که این با محتوای واقعی پر شده است.</div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingThree">
            <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"
            aria-labelledby="flush-headingThree"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">محتوای پیش‌فرض برای این آکوردیون که برای نشان دادن کلاس <code>.accordion-flush</code> طراحی شده است.
                این بدنه آیتم سوم آکوردیون است. در اینجا اتفاق خاصی از نظر محتوا نمی‌افتد،
                اما فقط فضا را پر می‌کند تا در نگاه اول شبیه به یک برنامه واقعی به نظر برسد.</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 accordion-primary" id="accordionPrimaryExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingPrimaryOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapsePrimaryOne" aria-expanded="true"
                aria-controls="collapsePrimaryOne">
                آیتم آکاردئون شماره ۱
            </button>
        </h2>
        <div id="collapsePrimaryOne" class="accordion-collapse collapse show"
            aria-labelledby="headingPrimaryOne"
            data-bs-parent="#accordionPrimaryExample">
            <div class="accordion-body">
                <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی، نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر کدام از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل توجه است که تقریباً هر HTMLی می‌تواند درون
                <code>.accordion-body</code> قرار بگیرد، اگرچه انتقال ممکن است محدوده نمایش را محدود کند.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingPrimaryTwo">
            <button class="accordion-button collapsed" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapsePrimaryTwo"
                aria-expanded="false" aria-controls="collapsePrimaryTwo">
                آیتم آکاردئون شماره ۲
            </button>
        </h2>
        <div id="collapsePrimaryTwo" class="accordion-collapse collapse"
            aria-labelledby="headingPrimaryTwo"
            data-bs-parent="#accordionPrimaryExample">
            <div class="accordion-body">
                <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی، نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر کدام از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل توجه است که تقریباً هر HTMLی می‌تواند درون
                <code>.accordion-body</code> قرار بگیرد، اگرچه انتقال ممکن است محدوده نمایش را محدود کند.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingPrimaryThree">
            <button class="accordion-button collapsed" type="button"
                data-bs-toggle="collapse" data-bs-target="#collapsePrimaryThree"
                aria-expanded="false" aria-controls="collapsePrimaryThree">
                آیتم آکاردئون شماره ۳
            </button>
        </h2>
        <div id="collapsePrimaryThree" class="accordion-collapse collapse"
            aria-labelledby="headingPrimaryThree"
            data-bs-parent="#accordionPrimaryExample">
            <div class="accordion-body">
                <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود تا زمانی که افزونه collapse کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها ظاهر کلی، نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر کدام از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل توجه است که تقریباً هر HTMLی می‌تواند درون
                <code>.accordion-body</code> قرار بگیرد، اگرچه انتقال ممکن است محدوده نمایش را محدود کند.
            </div>
        </div>
    </div>
</div>
ثانویه

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

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

این بدنه آکاردئون اولین آیتم است. این به‌صورت پیش‌فرض نمایش داده می‌شود، تا زمانی که افزونه‌ی collapse کلاس‌های لازم را اضافه کند که برای استایل‌دهی هر عنصر استفاده می‌شوند. این کلاس‌ها ظاهر کلی و همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر بخشی از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. همچنین قابل ذکر است که تقریباً هر کدی می‌تواند درون .accordion-body قرار بگیرد، اگرچه افکت انتقال ممکن است محدوده نمایش را محدود کند. 
<div class="accordion accordion-secondary" id="accordionSecondaryExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondaryOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseSecondaryOne" aria-expanded="true"
                        aria-controls="collapseSecondaryOne">
                        آیتم آکاردئون شماره ۱
                    </button>
                </h2>
                <div id="collapseSecondaryOne" class="accordion-collapse collapse show"
                    aria-labelledby="headingSecondaryOne"
                    data-bs-parent="#accordionSecondaryExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود، تا زمانی که افزونه‌ی collapse کلاس‌های لازم را اضافه کند که برای استایل‌دهی هر عنصر استفاده می‌شوند. این کلاس‌ها ظاهر کلی و همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر بخشی از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. همچنین قابل ذکر است که تقریباً هر کدی می‌تواند درون
                        <code>.accordion-body</code> قرار بگیرد، اگرچه افکت انتقال ممکن است محدوده نمایش را محدود کند.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondaryTwo">
                    <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#collapseSecondaryTwo"
                        aria-expanded="false" aria-controls="collapseSecondaryTwo">
                        آیتم آکاردئون شماره ۲
                    </button>
                </h2>
                <div id="collapseSecondaryTwo" class="accordion-collapse collapse"
                    aria-labelledby="headingSecondaryTwo"
                    data-bs-parent="#accordionSecondaryExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود، تا زمانی که افزونه‌ی collapse کلاس‌های لازم را اضافه کند که برای استایل‌دهی هر عنصر استفاده می‌شوند. این کلاس‌ها ظاهر کلی و همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر بخشی از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. همچنین قابل ذکر است که تقریباً هر کدی می‌تواند درون
                        <code>.accordion-body</code> قرار بگیرد، اگرچه افکت انتقال ممکن است محدوده نمایش را محدود کند.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondaryThree">
                    <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#collapseSecondaryThree"
                        aria-expanded="false" aria-controls="collapseSecondaryThree">
                        آیتم آکاردئون شماره ۳
                    </button>
                </h2>
                <div id="collapseSecondaryThree" class="accordion-collapse collapse"
                    aria-labelledby="headingSecondaryThree"
                    data-bs-parent="#accordionSecondaryExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون اولین آیتم است.</strong> این به‌صورت پیش‌فرض نمایش داده می‌شود، تا زمانی که افزونه‌ی collapse کلاس‌های لازم را اضافه کند که برای استایل‌دهی هر عنصر استفاده می‌شوند. این کلاس‌ها ظاهر کلی و همچنین نمایش و مخفی‌سازی را از طریق انتقال‌های CSS کنترل می‌کنند. شما می‌توانید هر بخشی از این موارد را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. همچنین قابل ذکر است که تقریباً هر کدی می‌تواند درون
                        <code>.accordion-body</code> قرار بگیرد، اگرچه افکت انتقال ممکن است محدوده نمایش را محدود کند.
                    </div>
                </div>
            </div>
        </div>
رنگ‌های ساده:
اصلی

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

این محتوای آیتم دوم آکاردئون است. مشابه آیتم اول عمل می‌کند و قابل شخصی‌سازی است. تمامی ویژگی‌های ظاهری از طریق کلاس‌های CSS قابل کنترل هستند.

این محتوای آیتم سوم آکاردئون است. می‌توانید محتوا و ظاهر آن را به دلخواه خود تغییر دهید. پشتیبانی از HTML کامل وجود دارد. 
<div class="accordion accordion-solid-primary" id="accordionPrimarySolidExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingPrimarySolidOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                    data-bs-target="#collapsePrimarySolidOne" aria-expanded="true"
                    aria-controls="collapsePrimarySolidOne">
                    آیتم آکاردئون #1
                </button>
            </h2>
            <div id="collapsePrimarySolidOne" class="accordion-collapse collapse show"
                aria-labelledby="headingPrimarySolidOne"
                data-bs-parent="#accordionPrimarySolidExample">
                <div class="accordion-body">
                    <strong>این محتوای آیتم اول آکاردئون است.</strong> این محتوا به‌طور پیش‌فرض نمایش داده می‌شود
                    تا زمانی که افزونه‌ی collapse کلاس‌های مناسب را اضافه کند. این کلاس‌ها ظاهر کلی را کنترل کرده
                    و از طریق ترنزیشن‌های CSS نمایش و پنهان‌سازی را مدیریت می‌کنند. شما می‌توانید این موارد را با
                    CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض تغییر دهید. همچنین توجه داشته باشید که تقریباً هر HTML
                    ای می‌تواند داخل <code>.accordion-body</code> قرار بگیرد، هرچند که ترنزیشن ممکن است
                    overflow را محدود کند.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingPrimarySolidTwo">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePrimarySolidTwo"
                    aria-expanded="false" aria-controls="collapsePrimarySolidTwo">
                    آیتم آکاردئون #2
                </button>
            </h2>
            <div id="collapsePrimarySolidTwo" class="accordion-collapse collapse"
                aria-labelledby="headingPrimarySolidTwo"
                data-bs-parent="#accordionPrimarySolidExample">
                <div class="accordion-body">
                    <strong>این محتوای آیتم دوم آکاردئون است.</strong> مشابه آیتم اول است.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingPrimarySolidThree">
                <button class="accordion-button collapsed" type="button"
                    data-bs-toggle="collapse" data-bs-target="#collapsePrimarySolidThree"
                    aria-expanded="false" aria-controls="collapsePrimarySolidThree">
                    آیتم آکاردئون #3
                </button>
            </h2>
            <div id="collapsePrimarySolidThree" class="accordion-collapse collapse"
                aria-labelledby="headingPrimarySolidThree"
                data-bs-parent="#accordionPrimarySolidExample">
                <div class="accordion-body">
                    <strong>این محتوای آیتم سوم آکاردئون است.</strong> مشابه سایر آیتم‌ها است.
                </div>
            </div>
        </div>
    </div>
ثانویه

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

این بدنه آکاردئون آیتم دوم است. به طور مشابه با آیتم اول عمل می‌کند، جایی که پلاگین collapse کلاس‌های مناسب را برای انتقالات و ظاهر اضافه می‌کند.

این بدنه آکاردئون آیتم سوم است. مانند آیتم‌های قبلی، این نیز توسط پلاگین collapse برای نمایش و مخفی کردن محتوا به طور روان کنترل می‌شود. 
<div class="accordion accordion-solid-secondary" id="accordionSecondarySolidExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondarySolidOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseSecondarySolidOne" aria-expanded="true"
                        aria-controls="collapseSecondarySolidOne">
                        آیتم آکاردئون #1
                    </button>
                </h2>
                <div id="collapseSecondarySolidOne" class="accordion-collapse collapse show"
                    aria-labelledby="headingSecondarySolidOne"
                    data-bs-parent="#accordionSecondarySolidExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون آیتم اول است.</strong> به طور پیش‌فرض نمایش داده می‌شود
                        تا زمانی که پلاگین collapse کلاس‌های مناسب را اضافه کند که ما برای استایل دادن به هر عنصر از آن‌ها استفاده می‌کنیم. این کلاس‌ها ظاهر کلی را کنترل می‌کنند،
                        و همچنین نمایش و مخفی کردن را از طریق انتقالات CSS انجام می‌دهند. شما می‌توانید هرکدام از این‌ها را با CSS سفارشی یا بازنویسی متغیرهای پیش‌فرض ما تغییر دهید. همچنین قابل ذکر است که تقریباً هر HTML‌ای می‌تواند در داخل
                        <code>.accordion-body</code> قرار گیرد، اگرچه انتقالات باعث محدودیت در Overflow می‌شوند.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondarySolidTwo">
                    <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#collapseSecondarySolidTwo"
                        aria-expanded="false" aria-controls="collapseSecondarySolidTwo">
                        آیتم آکاردئون #2
                    </button>
                </h2>
                <div id="collapseSecondarySolidTwo" class="accordion-collapse collapse"
                    aria-labelledby="headingSecondarySolidTwo"
                    data-bs-parent="#accordionSecondarySolidExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون آیتم دوم است.</strong> به طور مشابه با آیتم اول عمل می‌کند، جایی که پلاگین collapse کلاس‌های مناسب را برای انتقالات و ظاهر اضافه می‌کند.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingSecondarySolidThree">
                    <button class="accordion-button collapsed" type="button"
                        data-bs-toggle="collapse" data-bs-target="#collapseSecondarySolidThree"
                        aria-expanded="false" aria-controls="collapseSecondarySolidThree">
                        آیتم آکاردئون #3
                    </button>
                </h2>
                <div id="collapseSecondarySolidThree" class="accordion-collapse collapse"
                    aria-labelledby="headingSecondarySolidThree"
                    data-bs-parent="#accordionSecondarySolidExample">
                    <div class="accordion-body">
                        <strong>این بدنه آکاردئون آیتم سوم است.</strong> مانند آیتم‌های قبلی، این نیز توسط پلاگین collapse برای نمایش و مخفی کردن محتوا به طور روان کنترل می‌شود.
                    </div>
                </div>
            </div>
        </div>