Accordions

For information about accordions please refer to Bootstrap's documentation.

Default Accordions

Accordings are a group of .card elements:

html

<div class="accordion" id="myAccordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="card-title">
                <a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
                    <i class="fa fa-angle-right toggle-icon mr-1"></i>
                    Item #1
                </a>
            </h2>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#myAccordion">
            <div class="card-body">
                Content # 1
            </div>
        </div>
    </div>

    .
    .
    .

</div>

Custom Accordions

You can also have custom styled accordions by using:

.btn-* classes on the a.accordion-toggle element
.bgc-* .brc-* .text-* classes on the a.accordion-toggle element
.bgc-* .brc-* .text-* classes on the .card-title element. Those colors will be applied to a.accordion-toggle when it becomes 'expanded' (open)

Custom Accordion

html

<div class="card-header" id="headingOne">
    <h2 class="card-title bgc-primary-l3 text-dark-tp3 brc-primary-tp1">
        <a class="accordion-toggle btn btn-lighter-secondary brc-h-primary-m1 border-l-6 py-3 radius-0" href="#collapseOne6" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne6">
            <i class="fa fa-angle-right toggle-icon mr-2 text-95"></i>
            Item #1
        </a>
    </h2>
</div>

Custom icons

You can use custom icons by using Dynamic Styling:

html

<a class="d-style collapsed accordion-toggle" href="#collapseOne" data-toggle="collapse" aria-expanded="false" aria-controls="collapseOne2">
    <span class="position-r mr-3">
        <i class="far fa-plus-square d-collapsed"></i>
        <i class="far fa-minus-square d-n-collapsed"></i>
    </span>
    Item #1
</a>

For rotating directional icons, you should add .toggle-icon and they can be any direction:

html

<a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
    <i class="fa fa-angle-down toggle-icon mr-1"></i>
    Item #1
</a>