The accordion is a graphical control element comprising a vertically stacked list of items. Each item can be "expanded" or "collapsed" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Example Open in new tab

Section 1
Section 1 Content
Section 2
Section 2 Content

HTML Structure Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.



You use accordion for expanded one or more item, if you want to open one or more item use class "nkn-accordion", if you want to open only one item at once use class "nkn-accordion" accompanied of class "nkn-open-only-one".

CSS class names

Class Description
"nkn-accordion" La clase contenedor del acordeón
"nkn-accordion-section" Indica una sección del acordeón
"nkn-heading" Es la cabecera del acordeón.
"nkn-accordion-toggle" Es la parte de HTML que permite abrir o cerrar el acordeón.
"nkn-content" Para el contenido de una sección del acordeón.
"nkn-open-only-one" Put class "nkn-open-only-one" together class "nkn-accordion" if you want open only one item.

HTML data-attributes

Data role Description
data-nkn-role="accordion-toggle" For the javascript


Configuration Description
nkn-accordion nkn-open-only-one For expanded only one item at once.