What are Accordion Blocks?
Accordion blocks are a type of block that allows users to expand or contract a section of content depending on whether or not they need it. This is useful for situations where content for a very specific audience would otherwise overwhelm the page.
Related Content
Examples of Accordion Blocks
Accordions at 100% Width
This is an accordion block. You can click to expand this.
The accordion block will hide this content until expanded. You can click the headline again to contract the accordion.
Each content section inside an accordion functions similarly to a basic text box.
There are some key differences between this area and a basic text box, however. While you can change the text format to full HTML, certain content may not behave as you are expecting inside an accordion.
Furthermore, we do not advise using any headers inside accordions. The headlines of accordion sections do not function as headers. Therefore, adding a header inside an accordion would complicate the structuring of the site.
Too many accordion rows can make your information get lost.
Imagine looking at a wall of expanding accordions, trying to figure out what information is relevant to you. If you want to use accordions for something like an FAQ page, we highly recommend you break up the content by dividing it into sections and grouping the questions under them. This will allow for easier navigation by your site visitors!
Overly Long Accordion in a 70% Space
A very long accordion can be very cumbersome, and can greatly "distort" the layout of your page. Make sure you look at how your page looks with the accordion both open and closed, both on a desktop and on mobile! Accordions can be very tedious on mobile devices.
Here's an example!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultrices sem. Curabitur in tortor ac magna viverra congue. Nulla vel maximus justo, in consectetur massa. Aliquam sollicitudin in massa at interdum. Aliquam laoreet vehicula ipsum, ut placerat risus consequat fringilla. Sed hendrerit orci et ullamcorper posuere. Mauris in pulvinar risus. Nunc tincidunt, sem eleifend facilisis lobortis, odio dolor aliquam dui, consectetur maximus nibh velit sit amet massa. Proin at libero non nunc lobortis venenatis et sed leo. Cras quis accumsan enim, in tristique lacus. Mauris bibendum egestas augue quis ultrices. Fusce sit amet tristique mauris. Nullam eu nibh tristique, commodo urna in, consequat urna. Sed sem nibh, maximus nec metus sit amet, gravida tincidunt metus. Integer convallis, eros et convallis laoreet, augue enim hendrerit erat, ut tempor diam diam et tortor. Vestibulum luctus pulvinar cursus.
Suspendisse ac malesuada sem, vel venenatis quam. Nam at purus velit. Donec sodales nisl et pulvinar luctus. Nam convallis orci sit amet elementum consequat. Nulla vitae ornare mauris, eu tristique tortor. Nulla imperdiet nisi vestibulum velit porttitor varius id sit amet dui. Etiam orci ante, varius ac turpis sed, tincidunt consectetur arcu. Vestibulum dictum vulputate nisl at condimentum. Proin felis nisi, posuere et odio et, condimentum tristique nibh. In lobortis, eros tempor gravida cursus, velit velit lobortis tellus, in tristique nibh leo a ipsum. Sed ex metus, tincidunt porttitor lacus at, accumsan congue mauris.
Curabitur vitae elit id nunc sodales bibendum in a erat. Curabitur in ante commodo, aliquam dolor vel, eleifend nisi. Maecenas posuere aliquam leo interdum tristique. Donec maximus augue ligula. Etiam dignissim risus ipsum, nec sagittis nulla congue eget. Aliquam lacus ligula, viverra a faucibus ut, tincidunt eu ipsum. Morbi consectetur pulvinar libero eget volutpat. Donec consectetur massa urna, vitae lacinia est condimentum ut. Mauris et condimentum libero, sit amet vestibulum sem. Cras vitae congue ante, sed elementum nisl.
Nunc venenatis venenatis sapien vitae tristique. Sed sollicitudin tristique convallis. Morbi id sapien viverra, laoreet nibh non, lobortis magna. Pellentesque rutrum vestibulum vulputate. Nunc dictum consectetur magna at sagittis. Nulla facilisi. Pellentesque pulvinar, orci quis iaculis dignissim, mi nisl cursus urna, vitae pharetra magna nunc et elit. Curabitur mattis imperdiet hendrerit. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id odio molestie, auctor sem vitae, malesuada enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque id neque sodales, viverra massa ac, ullamcorper ex. Nulla facilisi.
Nunc quam quam, iaculis et pulvinar a, ultricies sit amet tellus. Curabitur erat eros, luctus quis rutrum eget, interdum vitae est. Nam suscipit congue tellus, a imperdiet metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec accumsan dui eu enim eleifend faucibus. Cras tempor imperdiet tristique. Nullam aliquam volutpat nunc, id tempor leo tristique eget. Pellentesque commodo augue sit amet odio ullamcorper ornare vel at mauris. Fusce consectetur, orci sed eleifend finibus, diam magna consequat velit, vel vehicula dolor massa at justo.
Talking Mobile in a 30% Space
Ensuring your page looks good on mobile devices is super important!
Accordions behave a bit differently on mobile.
Because of SiteMasonry's mobile ready design, columns stack on top of each other at full screen width when viewed on a mobile device. As such, the accordions on this page will all behave differently in that context.
You can test for multiple devices from your computer!
If you wish to test for a range of mobile devices all at once, view our article on testing for mobile using your browser.
Accordion in a 50% Space
Accordions will vary in height based on content, but will always expand width-wise to fit the size of the column they are placed within.
A singular accordion can be very effective for showing details for specific groups.
This is especially handy when you have a page that caters to a wide range of audiences. Remember, though, that a screen reader may not capture all content inside the accordion unless the user expands the accordion. As such, all generally needed information should be provided on the page at large.
Accordion in a 33% Space
The narrower you make your columns, the more you need to be aware of how your accordions format when expanded.
This accordion is alright for short content.
So long as you keep the content decently focused, having content in a 33% accordion will not look too strange. Keep in mind that much content that would fit in such a space succinctly may be better placed as plain text anyway.
Accordion in a 25% Space
Accordions get even tricker to format well in a 25% column. Text wrap makes short paragraphs suddenly take up much more vertical space.
This accordion is squished!
Fitting an accordion into a narrow space can be very tricky. You need to keep your content extremely focused in such a tight space as too much text will cause the expanded accordion to take up a lot of vertical space.
Any content that might format well in a narrow space tends to be important enough that it should not be in an accordion regardless. Use good judgement in what you are placing in accordions!