Adding Accordions to a Page

An accordion is a vertically stacked list of headers that can be clicked to show or hide content associated with each header. Accordions are sometimes called "Expand/Collapse" sections. Each accordion consists of two parts: the header and the panel. The accordion header contains the heading and can be clicked. The accordion panel contains the main content. 

Does my site have this feature?

Accordions are not a default feature on Department Web Framework sites. For information about your site, contact the web team: asweb@uw.edu.

When should I use accordions?

Accordions are often used for long pages with lots of content. However, using accordions may not be the best way to present the content:

  • Accordions should be avoided when your audience needs most or all of the content on the page to answer their questions. People might miss helpful content if it's hidden in an accordion.
  • Accordions are more suitable when people need only a few key pieces of content on a single page. By hiding most of the content, users can spend their time more efficiently focused on the few topics that matter. Accordions can be helpful when your audience primarily uses a mobile device to view the page.

For more help deciding whether to use accordions, read this Nielsen Norman article about accordions or contact the web team: asweb@uw.edu.

How to add accordions to a page

To create an accordion:

  1. While in "Edit" mode on a page, enter the accordion content into the Body section. Each accordion requires a heading followed by a paragraph.
  2. For the accordion heading, use the menu to make the content a Heading 3.

Screenshot for choosing Header 3

  1. For the accordion panel content, use the menu to make the content a Paragraph.
  2. Repeat steps 2 and 3 for each accordion section you wish to add to the page.
  3. In the menu, click the Source Code button.

Screenshot for source code button

  1. In the Source Code window, find the first accordion heading, which should be wrapped by <h3></h3> HTML tags.
  2. Directly above the first accordion heading, add the following HTML tag: <div class="content-accordion">

Screenshot of source code window

 

  1. Find the panel content of the final accordion. Directly beneath the content, add the following HTML tag: </div>
  2. If any accordion contains more than one paragraph of panel content, wrap all paragraphs in that accordion with <div></div> HTML elements. See the screenshot for an example.
  3. Once you are finished adding HTML tags, click OK to close the Source Code window.
  4. At the bottom of the page, click Save to save and view the page with the added accordions.

Screenshot of finished accordion page