Accordion accordion.js

Accordion extends upon the Collapse widget to associate multiple collapse items in the same container.

Notices

Widget Dependencies

Accordion requires the following:

Examples

Basic Example

A simple accordion.

Collapse Toggle #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.

Collapse Toggle #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.

Collapse Toggle #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
<div data-cfw="accordion">
<h4><a href="#accordion0" data-cfw="collapse" class="open">Collapse Toggle #1</a></h4>
<div id="accordion0" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
<h4><a href="#accordion1" data-cfw="collapse">Collapse Toggle #2</a></h4>
<div id="accordion1" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
<h4><a href="#accordion2" data-cfw="collapse">Collapse Toggle #3</a></h4>
<div id="accordion2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
</div>

Using Cards

Here some cards are used along with a bit of added styling to provide some layout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
<div data-cfw="accordion" class="accordion">
<div class="card mb-0">
<div class="card-header">
<h4 class="mb-0">
<a href="#card0" role="button" data-cfw="collapse" class="open">Collapse Toggle #1</a>
</h4>
</div>
<div id="card0" class="collapse">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header">
<h4 class="mb-0">
<a href="#card1" role="button" data-cfw="collapse">Collapse Toggle #2</a>
</h4>
</div>
<div id="card1" class="collapse">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header">
<h4 class="mb-0">
<a href="#card2" role="button" data-cfw="collapse">Collapse Toggle #3</a>
</h4>
</div>
<div id="card2" class="collapse">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nisi ipsum. Quisque feugiat, arcu in pulvinar varius; risus odio interdum diam; a hendrerit urna sem vitae enim. Aenean fermentum iaculis nibh sodales consectetur.
</div>
</div>
</div>
</div>

To achieve the above layout, the following styling was used.

.accordion {
> .card {
overflow: hidden;

&:not(:first-of-type) {
.card-header:first-child {
@include border-radius(0);
}

&:not(:last-of-type) {
border-bottom: 0;
@include border-radius(0);
}
}

&:first-of-type:not(:last-of-type) {
border-bottom: 0;
@include border-bottom-radius(0);
}

&:last-of-type:not(:first-of-type) {
@include border-top-radius(0);
}

.card-header {
margin-bottom: -$card-border-width;
}
}
}

Usage

To set up an accordion, all collapse items to be associated must be contained within the same ancestor element that is designated the accordion conatiner.

Via Data Attributes

Add data-cfw="accordion" to the ancestor element that contains all the collapse items to be associated.

Via JavaScript

Activates an element as an accordion listener.

$('#myAccordion').CFW_Accordion();

Methods

Method calls should be made on the accordion container.

Method Name Description
dispose Removes the event listeners and data from the accordion container element. Falls back to non-associated, or individual, collapse controls.
$('#myAccordion').CFW_Accordion('dispose');

Events

Event callbacks happen on the accordion element.

You can also get the collapse events as indicated in the Collapse widget due to event bubbling.

Event Type Description
init.cfw.accordion This event fires after the accordion item is initialized.
$('#myAccordion').on('init.cfw.accordion', function() {
// do something...
});