Buy Now
  1. Components
  2. UI Elements
  3. Accordion

Accordion

Toggle the visibility of content across your project with a few classes and our jquery codes.

Default Functionality

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion">
  <h6>What does royalty free mean?</h6>
  <div>...</div>
  <h6>What do you mean by item and end product?</h6>
  <div>...</div>
  <h6>What are some examples of permitted end products?</h6>
  <div>...</div>
</div>
$('#accordion').accordion({
  heightStyle: 'content'
});

Collapse Content

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
$('#accordion').accordion({
  heightStyle: 'content',
  collapsible: true
});

Custom Style

We've created a custom style to the active state panel based on the brand color for this template.

Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion accordion-style1">...</div>
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion accordion-style2">...</div>

Colored Variant

We've created a colored variant style based on the secondary brand color and dark color.

Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion accordion-pink">...</div>
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion accordion-style1 accordion-teal">...</div>
Royalty free means you just need to pay for rights to use the item once per end product. You don't need to pay additional or ongoing fees for each person who sees or uses it.
<div class="accordion accordion-style2 accordion-dark">...</div>

Your Own Color Skin

You can always add your own color skin to accordion by calling this mixin below for adding your own accordion color skin.

.accordion-mycolor {
  @include accordion-variant('color', 'lighten color');
}
<div class="accordion accordion-mycolor">...</div>