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.
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.
To achieve the above layout, the following styling was used.
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
Call the accordion via JavaScript:
Methods
.CFW_Accordion()
Activates the element as an accordion listener.
.CFW_Accordion('dispose')
Removes the accordion listener and data from the element. Falls back to non-associated, or individual, collapse controls.
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.