Download Github


The accordion is a vertically stacked list of items or sections, each of these items can be expanded or collapsed to reveal or hide its content. The accordion can be presented on the web page with all sections collapsed, with one section expanded, or more than one section expanded.


Copy the HTML snippet and keep in mind:

  1. The element with the class nkn-accordion is the container for all the stacked sections within the accordion.
  2. The element with the class nkn-accordion-item is a section of the accordion, which is composed of the title and content.
  3. The element with class nkn-accordion-heading is the title of the accordion section. It must have the attribute data-nkn-role = "accordion-toggle" , to have the functionality of expanding or collapsing the accordion section.
  4. In the element with the class nkn-icon-toggle goes the icon of the accordion, this must go inside the element with the class nkn-accordion-heading
  5. The element with the nkn-accordion-content class is where the accordion content goes.
  6. If you want to load the document with an expanded accordion section, you can use the nkn-open class together with the nkn-accordion-item.


HTML Snippet

How to use

Expand one accordion section at a time

To expand one accordion section at a time; use the nkn-open-only-one class together with the nkn-accordion class.