Skip to main content Skip to main navigation

Accordions

Accordions require jQuery and the Mercury UI Framework accordion plugin to work. Note: You will need to initialize them by calling $().mercuryuiAccordion();.

You can also open and close accordions via the plugin through actions by targeting the id of the accordion: $('#accordion-content-1').mercuryuiAccordion('open'); and $('#accordion-content-1').mercuryuiAccordion('close');.

Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#accordion-content-1').mercuryuiAccordion('open', { afterOpen: function(){ alert('Accordion opened!'); } });

Create custom branded accordions by using the accordion color mixin: @include accordion-color($color, $background-color, $border-color).

Base

Some content. 
<div class="accordions">
    <div class="accordion accordion-is-shown">
        <button type="button" class="button button--white accordion--button" id="accordion-button-1" aria-controls="accordion-content-1"
            aria-selected="true" role="tab">
            Accordion 1
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-1" aria-labelledby="accordion-button-1" tabindex="0" aria-hidden="false"
            aria-expanded="true" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
    <div class="accordion">
        <button type="button" class="button button--white accordion--button" id="accordion-button-2" aria-controls="accordion-content-2"
            aria-selected="false" role="tab">
            Accordion 2
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-2" aria-labelledby="accordion-button-2" tabindex="-1" aria-hidden="true"
            aria-expanded="false" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
</div>

Primary Color

Some content. 
<div class="accordions">
    <div class="accordion accordion--primary-color accordion-is-shown">
        <button type="button" class="button button--primary-color accordion--button" id="accordion-button-3" aria-controls="accordion-content-3"
            aria-selected="true" role="tab">
            Accordion 1
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-3" aria-labelledby="accordion-button-3" tabindex="0" aria-hidden="false"
            aria-expanded="true" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
    <div class="accordion accordion--primary-color">
        <button type="button" class="button button--primary-color accordion--button" id="accordion-button-4" aria-controls="accordion-content-4"
            aria-selected="false" role="tab">
            Accordion 2
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-4" aria-labelledby="accordion-button-4" tabindex="-1" aria-hidden="true"
            aria-expanded="false" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
</div>

Secondary Color

Some content. 
<div class="accordions">
    <div class="accordion accordion--secondary-color accordion-is-shown">
        <button type="button" class="button button--secondary-color accordion--button" id="accordion-button-5" aria-controls="accordion-content-5"
            aria-selected="true" role="tab">
            Accordion 1
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-5" aria-labelledby="accordion-button-5" tabindex="0" aria-hidden="false"
            aria-expanded="true" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
    <div class="accordion accordion--secondary-color">
        <button type="button" class="button button--secondary-color accordion--button" id="accordion-button-6" aria-controls="accordion-content-6"
            aria-selected="false" role="tab">
            Accordion 2
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-6" aria-labelledby="accordion-button-6" tabindex="-1" aria-hidden="true"
            aria-expanded="false" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
</div>

Tertiary Color

Some content. 
<div class="accordions">
    <div class="accordion accordion--tertiary-color accordion-is-shown">
        <button type="button" class="button button--tertiary-color accordion--button" id="accordion-button-7" aria-controls="accordion-content-7" aria-selected="true" role="tab">
            Accordion 1
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-7" aria-labelledby="accordion-button-7" tabindex="0" aria-hidden="false" aria-expanded="true" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
    <div class="accordion accordion--tertiary-color">
        <button type="button" class="button button--tertiary-color accordion--button" id="accordion-button-8" aria-controls="accordion-content-8" aria-selected="false" role="tab">
            Accordion 2
            <span class="arrow"></span>
        </button>
        <div class="accordion--content" id="accordion-content-8" aria-labelledby="accordion-button-8" tabindex="-1" aria-hidden="true" aria-expanded="false" role="tabpanel">
            <div class="accordion--content-inner">
                Some content.
            </div>
        </div>
    </div>
</div>