Accordion

With accordion type only one item will expanded (active). When other item is selected, the currently active will collapse.

  • First Item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Second Item

    Ut eu dapibus velit. Duis commodo sollicitudin molestie. Fusce felis eros, tincidunt id venenatis et, molestie et sem.

  • Third Item

    Vivamus id nunc auctor, faucibus purus sed, accumsan quam. Phasellus tincidunt ex tellus, vel maximus magna vestibulum vitae.

Expandable

This type allows multiple items to be expanded. Toggling an item’s state only affects itself.

  • I am expanded
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Also expanded

    Ut eu dapibus velit. Duis commodo sollicitudin molestie. Fusce felis eros, tincidunt id venenatis et, molestie et sem.

Popout

Popout type works like an accordion but with different expanding style.

  • First Item
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Second Item

    Ut eu dapibus velit. Duis commodo sollicitudin molestie. Fusce felis eros, tincidunt id venenatis et, molestie et sem.

  • Third Item

    Vivamus id nunc auctor, faucibus purus sed, accumsan quam. Phasellus tincidunt ex tellus, vel maximus magna vestibulum vitae.

Customization

The header, content and border colors can be customized. Items have selective icon and active state.

Accordion and expandable also have shadow control for elevation effect.

  • The Good

    Blondie (The Good) (Clint Eastwood) is a professional gunslinger who is out trying to earn a few dollars.

  • The Bad

    Angel Eyes (The Bad) (Lee Van Cleef) is a hitman who always commits to a task and sees it through, as long as he is paid to do so.

  • The Ugly

    Tuco (The Ugly) (Eli Wallach) is a wanted outlaw trying to take care of his own hide.