Accordion

Accordion is often used when we need to display titles and hide details. A typical usage is for FAQ.

Accordion with closed cards

In this case there is no default open card.

Aute sunt Lorem aute sunt esse et enim dolore ad voluptate nisi occaecat.

Consequat mollit laboris voluptate ex laboris esse nostrud esse. Incididunt labore aliquip excepteur consequat.

Tempor cupidatat laborum consectetur eiusmod cupidatat exercitation reprehenderit Lorem adipisicing cillum esse.

Accordion within a grid with independent cards

The accordion is embedded into a grid.

Usually each time a card is opened all other cards are closed, in this case all cards are independent.

Aute sunt Lorem aute sunt esse et enim dolore ad voluptate nisi occaecat.

Consequat mollit laboris voluptate ex laboris esse nostrud esse. Incididunt labore aliquip excepteur consequat.

Tempor cupidatat laborum consectetur eiusmod cupidatat exercitation reprehenderit Lorem adipisicing cillum esse.

Accordion with style

In this case we had an external style widget to add style to the accordion widget.

Aute sunt Lorem aute sunt esse et enim dolore ad voluptate nisi occaecat.

Consequat mollit laboris voluptate ex laboris esse nostrud esse. Incididunt labore aliquip excepteur consequat.

Tempor cupidatat laborum consectetur eiusmod cupidatat exercitation reprehenderit Lorem adipisicing cillum esse.

Plain bootstrap accordion

Uses accordion-flush class and open the first card by default.

Aute sunt Lorem aute sunt esse et enim dolore ad voluptate nisi occaecat.

Consequat mollit laboris voluptate ex laboris esse nostrud esse. Incididunt labore aliquip excepteur consequat.

Tempor cupidatat laborum consectetur eiusmod cupidatat exercitation reprehenderit Lorem adipisicing cillum esse.