Note: The markup that can be copied to your clipboard from this page is utilizing the latest Bootstrap 5.2.2 library markup. If your project is currently using the previous Bootstrap 4.6.2 library, you must replace any "data-bs-" attribute with "data-". The "-bs" attribute addition applies to Boostrap 5.2.2 only so as to not collide with other Javascript frameworks that may also utilize "data" attributes.




Example: Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-01">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-01" aria-expanded="false" aria-controls="collapseAccordionDefault-01">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-01" aria-labelledby="accordionDefault-01" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-02">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-02" aria-expanded="false" aria-controls="collapseAccordionDefault-02">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-02" aria-labelledby="accordionDefault-02" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 03 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-03">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-03" aria-expanded="false" aria-controls="collapseAccordionDefault-03">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-03" aria-labelledby="accordionDefault-03" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
Copy
                                    
                                        <!-- ACTIVE STATE -->
<div class="accordion-item active">...</div>
<!-- ACTIVE DISABLED STATE -->
<div class="accordion-item active disabled">...</div>
<!-- DISABLED STATE -->
<div class="accordion-item disabled">...</div>



Example: Accordion with Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-01">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-01" aria-expanded="false" aria-controls="collapseAccordionDefault-01">Text <span class="ms-10 fs-8 text-gray">Subtitle Text</span></button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-01" aria-labelledby="accordionDefault-01" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-02">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-02" aria-expanded="false" aria-controls="collapseAccordionDefault-02">Text <span class="ms-10 fs-8 text-gray">Subtitle Text</span></button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-02" aria-labelledby="accordionDefault-02" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 03 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-03">
<button class="accordion-button collapsed w-100" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-03" aria-expanded="false" aria-controls="collapseAccordionDefault-03">Text <span class="ms-10 fs-8 text-gray">Subtitle Text</span></button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-03" aria-labelledby="accordionDefault-03" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
Copy
                                    
                                        <!-- ACTIVE STATE -->
<div class="accordion-item active">...</div>
<!-- ACTIVE DISABLED STATE -->
<div class="accordion-item active disabled">...</div>
<!-- DISABLED STATE -->
<div class="accordion-item disabled">...</div>



Example: Accordion with Button Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-01" aria-expanded="false" aria-controls="collapseAccordionDefault-01">Text</button>
<span class="btn-group-right">
<ul class="btn-icons">
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-pencil tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Edit"></i></a></li>
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-times tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Delete"></i></a></li>
</ul>
</span>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-01" aria-labelledby="accordionDefault-01" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-02" aria-expanded="false" aria-controls="collapseAccordionDefault-02">Text</button>
<span class="btn-group-right">
<ul class="btn-icons">
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-pencil tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Edit"></i></a></li>
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-times tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Delete"></i></a></li>
</ul>
</span>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-02" aria-labelledby="accordionDefault-02" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 03 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionDefault-03">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionDefault-03" aria-expanded="false" aria-controls="collapseAccordionDefault-03">Text</button>
<span class="btn-group-right">
<ul class="btn-icons">
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-pencil tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Edit"></i></a></li>
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-times tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Delete"></i></a></li>
</ul>
</span>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionDefault-03" aria-labelledby="accordionDefault-03" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
Copy
                                    
                                        <!-- ACTIVE STATE -->
<div class="accordion-item active">...</div>
<!-- ACTIVE DISABLED STATE -->
<div class="accordion-item active disabled">...</div>
<!-- DISABLED STATE -->
<div class="accordion-item disabled">...</div>



Example: Accordion Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion accordion-small">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionSmall-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionSmall-01" aria-expanded="false" aria-controls="collapseAccordionSmall-01">Text</button>
<span class="btn-group-right">
<ul class="btn-icons">
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-pencil tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Edit"></i></a></li>
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-times tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Delete"></i></a></li>
</ul>
</span>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionSmall-01" aria-labelledby="accordionSmall-01" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionSmall-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionSmall-02" aria-expanded="false" aria-controls="collapseAccordionSmall-02">Text</button>
<span class="btn-group-right">
<ul class="btn-icons">
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-pencil tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Edit"></i></a></li>
<li><a href="#" target="_self" class="btn-icon noprint"><i class="fa-solid fa-times tooltips" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Delete"></i></a></li>
</ul>
</span>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionSmall-02" aria-labelledby="accordionSmall-02" data-bs-parent="">
<div class="accordion-body">
<!-- CONTENT GOES HERE -->
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->



Example: Accordion FAQs

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion accordion-faq">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFAQ-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFAQ-01" aria-expanded="false" aria-controls="collapseAccordionFAQ-01">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFAQ-01" aria-labelledby="accordionFAQ-01" data-bs-parent="">
<div class="accordion-body">
<p>Text</p>
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFAQ-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFAQ-02" aria-expanded="false" aria-controls="collapseAccordionFAQ-02">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFAQ-02" aria-labelledby="accordionFAQ-02" data-bs-parent="">
<div class="accordion-body">
<p>Text</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->



Example: Accordion FAQs for iBOT

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion accordion-faq-ibot">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFAQ-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFAQ-01" aria-expanded="false" aria-controls="collapseAccordionFAQ-01">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFAQ-01" aria-labelledby="accordionFAQ-01" data-bs-parent="">
<div class="accordion-body">
<p>Text</p>
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFAQ-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFAQ-02" aria-expanded="false" aria-controls="collapseAccordionFAQ-02">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFAQ-02" aria-labelledby="accordionFAQ-02" data-bs-parent="">
<div class="accordion-body">
<p>Text</p>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->



Example: Accordion for Filtering
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
table content
Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion accordion-filter">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFilter-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFilter-01" aria-expanded="false" aria-controls="collapseAccordionFilter-01">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFilter-01" aria-labelledby="accordionFilter-01" data-bs-parent="">
<div class="accordion-body">
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">
<tbody>
<tr>
<td width="100%" align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFilter-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFilter-02" aria-expanded="false" aria-controls="collapseAccordionFilter-02">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFilter-02" aria-labelledby="accordionFilter-02" data-bs-parent="">
<div class="accordion-body">
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">
<tbody>
<tr>
<td width="100%" align="left" valign="middle">Text</td>
</tr>
<tr class="active">
<td align="left" valign="middle">Text</td>
</tr>
<tr class="active disabled">
<td align="left" valign="middle">Text</td>
</tr>
<tr class="disabled">
<td align="left" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ACCORDION 03 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionFilter-03">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionFilter-03" aria-expanded="false" aria-controls="collapseAccordionFilter-03">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionFilter-03" aria-labelledby="accordionFilter-03" data-bs-parent="">
<div class="accordion-body">
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">
<tbody>
<tr>
<td width="100%" align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->
Copy
                                    
                                        <!-- ACTIVE STATE -->
<div class="accordion-item active">...</div>
<!-- ACTIVE DISABLED STATE -->
<div class="accordion-item active disabled">...</div>
<!-- DISABLED STATE -->
<div class="accordion-item disabled">...</div>



Example: Accordion for Reports
table header table header table header
table content 0.00 0.00
table content 0.00 0.00
table content 0.00 0.00
table header table header table header
table content 0.00 0.00
table content 0.00 0.00
table content 0.00 0.00
Copy
                                    
                                        <!-- ACCORDION START -->
<div class="accordion accordion-report">
<!-- ACCORDION 01 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionReport-01">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionReport-01" aria-expanded="false" aria-controls="collapseAccordionReport-01">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionReport-01" aria-labelledby="accordionReport-01" data-bs-parent="">
<div class="accordion-body">
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">
<thead>
<tr>
<th width="50%" align="left" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ACCORDION 02 -->
<div class="accordion-item">
<h6 class="accordion-header" id="accordionReport-02">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAccordionReport-02" aria-expanded="false" aria-controls="collapseAccordionReport-02">Text</button>
</h6>
<div class="accordion-collapse collapse" id="collapseAccordionReport-02" aria-labelledby="accordionReport-02" data-bs-parent="">
<div class="accordion-body">
<div class="table-responsive">
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="table table-hover">
<thead>
<tr>
<th width="50%" align="left" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
<th width="25%" align="right" valign="middle">Text</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
<tr>
<td align="left" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
<td align="right" valign="middle">Text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- ACCORDION END -->


© Interactive Brokers LLC