An accordion is a UI component that expands and collapses sections of content, useful for FAQs, menus, and hiding large amounts of information.

Accordion With Links

Option 1 (XX)

Option 2 (XX)

Option 3 (XX)

<div class="accordion">
    <div class="accordion__tab">
        <button class="accordion__tab--label" id="tab3" tabindex="0">Lorem Ipsum is simply dummy text <span class="btn__clear" aria-label="Clear" tabindex="0">Clear</span></button>
        <div class="accordion__tab--content bg-gray">
            <div>
                <div class="form-check-label-row">
                    <label class="form-check-label form-label-sm" for="checkbox-16">
                        <input type="checkbox" id="checkbox-16" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 1&amp; Machine Learning</span>
                        <span class="form-check-label__count">(XX)</span>
                    </label>
                </div>
                <div class="form-check-label-row">
                    <label class="form-check-label form-label-sm" for="checkbox-17">
                        <input type="checkbox" id="checkbox-17" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 2</span><span class="form-check-label__count">(XX)</span>
                    </label>
                </div>
                <div class="form-check-label-row">
                    <label class="form-check-label form-label-sm" for="checkbox-18">
                        <input type="checkbox" id="checkbox-18" class="form-check-input" aria-label="Checkbox" /><span class="form-check-label__text">Option 3 &amp; Analytics</span><span class="form-check-label__count">(XX)</span>
                    </label>
                </div>
            </div>
            <button role="button" class="show__more" aria-label="Show More" tabindex="0">Show More</button>
        </div>
    </div>
</div>