The accordion paragraph can quickly compact a lengthy text-heavy page into a compact layout. It can be a useful tool for some types of content, but not for others. A few factors to keep in mind: 

  • How much of the content would an average visitor need to read or skim? Would collapsing it cause them to click on each entry? 
    • The answer can depend on the content and the audience for your page.
    • Causing a majority of your visitors to expand each entry to simply access information may make it difficult for them to use the page. 
    • Many people are willing to scroll to skim and find the information they're looking for. 
  • The collapsed text is hidden and visitors can't use the "control+f" to find a specific word.
  • Accordions may help with the layout of a page on mobile and could make it more approachable.

The Nielson Norman Group has more detail about how accordions are not always the answer for complex content and accordions on mobile.

Accordions are one of many tools for displaying content and have a place, but taking the time to consider how people will use your site will go a long way with your design.

Padding Options 

  • "none" aligns the accordion with the page title and you have a sidebar
  • Align with page title if you have no sidebar. This is the default setting.
  • 10%
  • 20%
     

Examples

Beaver Facts (No margin, default style)

They are native to North America, but also live in Europe. 

Orange Background, 10% Margin

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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.

Grey Background, 20% Margins

Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Tellus at urna condimentum mattis. Sollicitudin ac orci phasellus egestas tellus. Eget nullam non nisi est sit. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Senectus et netus et malesuada fames ac. Mauris vitae ultricies leo integer malesuada.

Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Tellus at urna condimentum mattis. Sollicitudin ac orci phasellus egestas tellus. Eget nullam non nisi est sit. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Senectus et netus et malesuada fames ac. Mauris vitae ultricies leo integer malesuada.

Black background, align with page title

Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Tellus at urna condimentum mattis. Sollicitudin ac orci phasellus egestas tellus. Eget nullam non nisi est sit. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Senectus et netus et malesuada fames ac. Mauris vitae ultricies leo integer malesuada.

Id venenatis a condimentum vitae sapien pellentesque habitant morbi. Metus vulputate eu scelerisque felis imperdiet proin fermentum. Tellus at urna condimentum mattis. Sollicitudin ac orci phasellus egestas tellus. Eget nullam non nisi est sit. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Senectus et netus et malesuada fames ac. Mauris vitae ultricies leo integer malesuada.

Spacing at the end of pages

It's a good idea to add a Divider paragraph bundle after an accordion if it's the last paragraph at the bottom of the page. This practice will create a little breathing between the content and the footer.

Here are the settings I use:

  • Divider Size: Medium
  • Divider Color: White
  • Additional Divider: None

screenshot showing settings. in plain text above