Accordions are elements used to expand and collapse content that is broken into logical sections.

When to use & what problem does this solve?

Accordions are useful for pages that have long lists of items that if displayed all at once would require lots of scrolling.  For example, an FAQ page or other long lists that consist of headings and associated blocks of content.


Step 1

In the css/js block add the following:

Demo - where to place the JavaScript

Paste the script tags in the css/js container.

Step 2

HTML for the accordion:

Demo - where to place the HTML

Paste the html in the html editor for the main content area.

Example Usage

  • Title
  • Title
  • Title

Note: this is our local copy of Zurb's documentation.  Our installation and styles differ in some ways from the stock foundation.  To account for these differences, we have duplicated their documentation in our environment.  This local documentation is authoritative for HSC sites.