Black Sun Plc: Accordion

Accordion

Create a list of items that can be shown individually by clicking an item's header.

Collapsing an element will animate the height from its current value to 0.

Click the headers below to show and hide another element.

Example # Basic

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.

Can collapse all elements and at a time only single element can show.

HTML

<ul class="bs-accordion" data-behavior-is="accordion-list">
    <li class="bs-accordion__item">
        <div class="bs-accordion__header">
            <button type="button" id="accordion-first" aria-controls="collapseOne" aria-expanded="true" class="selected">
                Accordion item 1
            </button>
        </div>
        <div id="collapseOne" aria-labelledby="accordion-first" class="bs-accordion__body selected">
            <div class="content-wrap">
                <p>enim ad minim veniam, quis nostrud..</p>
            </div>
        </div>
    </li>
    <li class="bs-accordion__item">
        <div class="bs-accordion__header">
            <button type="button" id="accordion-second" aria-controls="collapseTwo" aria-expanded="false">
                Accordion item 2
            </button>
        </div>
        <div id="collapseTwo" aria-labelledby="accordion-second" class="bs-accordion__body">
            <div class="content-wrap">
                <p>enim ad minim veniam, quis nostrud.</p>
            </div>
        </div>
    </li>
    <li class="bs-accordion__item">
        <div class="bs-accordion__header">
            <button type="button" id="accordion-third" aria-controls="collapseThree" aria-expanded="false">
                Accordion item 3
            </button>
        </div>
        <div id="collapseThree" aria-labelledby="accordion-third" class="bs-accordion__body">
            <div class="content-wrap">
                <p>enim ad minim veniam.</p>
            </div>
        </div>
    </li>
</ul>

Example # No collapsing

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.

One element always show and only single element can show at a time.

Add data-type "noCollapse" attribute to <div class="bs-accordion">

<div data-type="noCollapse" class="bs-accordion" data-behavior-is="accordion-list">

Example # Multiple open elements

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.

Show and hide multiple elements.

Add data-type "multi" attribute to <div class="bs-accordion">

<div data-type="multi" class="bs-accordion" data-behavior-is="accordion-list">

Example # with hash

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor reprehenderit.

enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliqu.

Duis aute irure dolor reprehenderit enim ad minim veniam.

Add data-has-hash "true" attribute to <div class="bs-accordion">

<div data-has-hash="true" class="bs-accordion" data-behavior-is="accordion-list">

In this implementation we are also checking hash in the page url and page will scroll to matched accordion link.