Accordions

Basic accordion

The accordion helps in reducing the space required that otherwise will be occupied. Accordions can be expanded by default by placing a 'default-expanded' class on the div. The accordion has an optional Expand/Collapse All button, using the class 'acc-wrap'.

The accordion title can be any heading element as long as it has the class `title-bar`, while the accordion content can be anything as long as it follows the title.

Demo

First Title

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim convallis vitae luctus libero lacinia.

Second Title

Aliquam nisl enim tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id molestie magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Third Title - Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Fourth Title - Integer posuere erat a ante venenatis dapibus

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>

<!-- If the accordion needs to have an Expand/Collapse All button, use the optional class `acc-wrap` -->
<!-- Accordions can now be expanded by default by placing a "default-expanded" class on the div -->
<div class="cui accordion {{ acc-wrap }} {{ default-expanded }}">
	<!-- The accordion title can be any heading element as long as it has the class `title-bar` -->
	<h3 class="title-bar">{{ Accordion title }}</h3>
	<!-- The accordion content can be anything. -->
		{{ Accordion content }}

	<!-- Repeat as necessary -->
	<h3 class="title-bar">{{ Accordion title }}</h3>
		{{ Accordion content }}
</div>

Single accordion

Demo

Dark variant

Aliquam tincidunt velit sit amet

Light variant

Aliquam tincidunt velit sit amet

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>

<!-- Default background is the dark gray -->
<!-- Add the class accordion-single-light will update the background to the light grey -->

<div class="cui accordion accordion-single {{ accordion-single-light }} mb-lg">
	<!-- The accordion title can be any heading element as long as it has the class `title-bar` -->
	<h3 class="title-bar">{{ Accordion title }}</h3>
	<!-- The accordion content can be anything. -->
		{{ Accordion content }}
</div>

Information This site is moving

Note

Accordions

Basic accordion

Demo

First Title

Second Title

Third Title - Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Fourth Title - Integer posuere erat a ante venenatis dapibus

Code

Single accordion

Demo

Dark variant

Aliquam tincidunt velit sit amet

Light variant

Aliquam tincidunt velit sit amet

Code