Awesomeness - Components

Accordion

The Accordion is a simple ul-list where some of the list-items are hidden. From the CSS point of view the main items use the class .accordion__divider and sub items use the class .accordion__inner-element. To enable the open / close action you have to specify the attribute data-collapse-group for the entire accordion. Each divider with its elements in the accordion needs a data-collapse-target-member and data-collapse-member attribute.

Example

Imports

SASS:

@import "base";
@import "imports/modules/accordion";

Javascript:

require(["collapse"], function(Collapse)
{
	Collapse.init();
});

Code

<ul class="accordion">
	<li class="accordion__divider">
		<a href="#nav" data-collapse-target-group="accordion" data-collapse-target-member="fruits">Fruits</a>
	</li>
	<li class="collapse-bd is-expanded" data-collapse-group="accordion" data-collapse-member="fruits">
		<ul class="accordion__inner collapse-inner">
			<li class="accordion__inner-element"><a href="#">Strawberry</a></li>
			<li class="accordion__inner-element"><a href="#">Raspberry</a></li>
			<li class="accordion__inner-element"><a href="#">Ananas</a></li>
		</ul>
	</li>
	<li class="accordion__divider">
		<a href="#btn" data-collapse-target-group="accordion" data-collapse-target-member="vege">Vegetables</a>
	</li>
	<li class="collapse-bd" data-collapse-group="accordion" data-collapse-member="vege">
		<ul class="accordion__inner collapse-inner">
			<li class="accordion__inner-element"><a href="#">broccoli</a></li>
			<li class="accordion__inner-element"><a href="#">carrots</a></li>
		</ul>
	</li>
	<li class="accordion__divider">
		<a href="#form" data-collapse-target-group="accordion" data-collapse-target-member="herbs">Herbs</a>
	</li>
	<li class="collapse-bd" data-collapse-group="accordion" data-collapse-member="herbs">
		<ul class="accordion__inner collapse-inner">
			<li class="accordion__inner-element"><a href="#">basil</a></li>
			<li class="accordion__inner-element"><a href="#">parsley</a></li>
			<li class="accordion__inner-element"><a href="#">marjoram</a></li>
		</ul>
	</li>
</ul>