CSS Plugins

Lightweight, simple, smart and well structured modular system built
upon 16 scalable grids system that generates smooth and itch-free responsive layouts.
It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

Definition

An accordion is a great utility plugin essential for revealing hidden underlying contents within a specific box.
Contents within expands and contracts when toggled.

Accordion class is identified by class name accordion-toggle with a corresponding descandant
sibling class accordion which accommodates the concealed contents or information to be displayed when expanded.
The contents within the container
are displayed with the aid of unorder list when collapse or expand.

Plugin Class

Classes

Definition

accordion-toggle

Parent accordion container.

accordion

Accordion sibling, can also have sibling if multiple.

Structure

Set Up

Start by setting up the accordion container and assign the class attribute
(accordion-toggle) to the -div- elements.

Sibling Container

With the parent container already set up, you may use unorder-list element
to store any hidden contents including the
action button (holding the title label) and nested sibling container.
Repeat the same procedure to create extensive content, provided you have more contents to be listed, but paying attention
to the action button with ID attribute associated with the label.

The action buttons

Action button is required to enable the toggle event, in order to make it an effective one, user must apply a consistent
naming convention such as toggle-1, toggle-2, toggle-3,...toggle-N, or button-1, ...button-N,
or any conventional ID provided it matches the assigned id for label. The caret arrow is enabled by calling the
icon class and assign it to span element, to create subtle effect.

The action button that trigger the opening of the hidden content hosted in the sibling container

Double Accordion

Setting up double accordion is very simple, once you have established clean accordion set up as shown here, you just
have to stack as many sibling as you might possible need, and you must ensure unique ID attribute is assigned to every
toggled button to avoid mix matched. Every descendant sibling must have its corresponding ID to the label element.