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.
- Accordion 1
Panel 1. Lorem ipsum dolor
- Accordion 2
Panel 2. Lorem ipsum dolor
- Accordion 3
Panel 3. Lorem ipsum dolor
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.