Accordion

The Accordion

Accordions are panels that can expand and collapse. They are a great way for presenting information in a limited amount of space. By default the accordion will toggle one panel at a time. Note: accordions require jquery.min.js and timber.min.js.

  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Example
								
									

Toggle Icons

Toggle icons can be added to the accordion by adding the data attribute data-toggle-icon to the accordion wrapper. The script will toggle between two preset icons classes which can be changed directly in timber.js.

  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Example
								
									

Custom Icons

Custom icons can be added to the accordion headers by using custom icon class. For more information on custom icon classes visit the icon cheatsheet.

  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Example
								
									

Multiple Open Panels

The accordion also supports multiple open panels. To enable multiple open panels add data-toggle-multiple. The .active class should be added to the li of each panel the should be open by default.

  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Example
								
									

Addtional Styles

Accordions can be styled further with rounded corners and altered in size. To add rounded corners simply add the .rounded class to the accordion wrapper. To alter size simply add .small, .medium, .large or .xlarge classes to the accordion wrapper.

  • Panel 1 Title
    Panel 1 Content

    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.

  • Panel 2 Title
    Panel 2 Content

    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.

  • Panel 3 Title
    Panel 3 Content

    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.

Example
								
									
Theme Mountain

Current Version