Menu
  • Dashboard

Accordion

Accordion

Accordions are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container..

Basics

The container for an accordion needs the class .accordion, and the attribute data-accordion. Note that in these examples, we use a <ul>, but you can use any element you want.

Multi-expand

By default, only one pane of an accordion can be open at a time. This can be changed by setting the multiExpand option to true.

Tabs

Tabs

Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.

Basics

There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class .tabs, and each item has the class .tabs-title. Each tab contains a link to a tab. The href of each link should match the ID of a tab.

one

Check me out! I'm a super cool Tab panel with text content!

Vertical Tabs

Add the .vertical class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.