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

                                            
                                                <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>
                                            
                                        

                                            
                                                <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> این به طور پیش‌فرض نمایش داده می‌شود، تا زمانی که پلاگین
                                                                جمع‌شدن
                                                                کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها کنترل می‌کنند 
                                                                ظاهر کلی، 
                                                                همچنین نمایش و پنهان‌سازی را از طریق انتقال‌های CSS. شما می‌توانید هر یک از این‌ها را با 
                                                                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> این به طور پیش‌فرض پنهان است، تا زمانی که پلاگین
                                                                جمع‌شدن
                                                                کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها کنترل می‌کنند 
                                                                ظاهر کلی، 
                                                                همچنین نمایش و پنهان‌سازی را از طریق انتقال‌های 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> این به طور پیش‌فرض پنهان است، تا زمانی که پلاگین
                                                                جمع‌شدن
                                                                کلاس‌های مناسب را اضافه کند که ما برای استایل‌دهی به هر عنصر استفاده می‌کنیم. این کلاس‌ها کنترل می‌کنند 
                                                                ظاهر کلی، 
                                                                همچنین نمایش و پنهان‌سازی را از طریق انتقال‌های CSS. شما می‌توانید هر یک از این‌ها را با 
                                                                CSS سفارشی یا 
                                                                با جایگزینی متغیرهای پیش‌فرض ما تغییر دهید. همچنین شایان ذکر است که تقریباً هر HTML می‌تواند در 
                                                                <code>.accordion-body</code> قرار گیرد، اگرچه انتقال محدودیت‌هایی برای overflow دارد.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>