Accordion Component

The accordion component displays content and links that would otherwise make the page excessively long or difficult to read. However, using accordions is best when other content components don’t work. Usually, the ideal route is to follow content best practices and focus on on-page content structure. Generally, story group components, link lists, and headers work well for structuring content. Or, you can always separate content into different pages. As accordions consolidate space, they hide content from users. That said, not everyone will understand how they work. On the other hand, if you’ve tried alternative options and have a great deal of simple content and links, then accordions may be a good solution.

Accordions can expand and collapse, just like the musical instrument. When a user clicks on an accordion, it will open to reveal or hide text, links, or both. When a user visits this ct.gov site, scrolls down to “Opportunities in Your Community,” then to the group title “Types of Employment.” The user then clicks on the accordion’s plus sign that says, “What kind of job is right for you?” The accordion expands with a link list of job resources and text. Then, clicking the minus sign closes the accordion back up. Use keywords in your headers and make the most of your page’s ability to attract traffic. Headers are a great place to add search engine-optimized (SEO) keywords or phrases.

This component can be used on a Full-width Template page as well are a Right-rail Template page.

You can use an accordion with or without sub-items. Depending on your content and how many groups you want to break it into, group multiple sections of accordions according to their categories by using different list groups. An accordion with sub-items will nest relevant categories together. When you open them, they’ll provide related sub-accordions that contain more text and links. An accordion without sub-items opens to one item and expands and includes text or a link.

Accordion with sub-items

You can nest accordions together according to list groups and then include different content within each one. So, for example, when creating a hefty IT page with many other products, make a series of accordions with sub-items. The first accordion’s list group title could be “IT Products.” When your user clicks on each accordion within the IT Products group, it will open, providing text and links to Collaborative Software content. When the user clicks the Collaborative Software accordion, it expands to its first sub-accordion, which features a specific and related product and content, like SharePoint. Clicking open the next accordion in the group could contain a description of another form of Collaborative Software, like Teams, and so forth.

An accordion without sub-items opens to one item and will simply expand and provide copy or a link. For example, below, the list group title would be “Collaborative Software.” Then, when you open the accordion, it could have a link to and text about SharePoint.