Some things may look a little different on your site
We are currently transitioning from an old set of blocks to these new ones. Please note that the following documentation is for the new blocks. While some things may look similar, there will be likely be some notable differences, so please use caution when referring to these documents and feel free to reach out if you have any questions.
Introduction
The accordion block allows you to add collapsable content of your page. Accordions are a great way to organize and group related content. Each accordion contains two parts: the accordion group (the container) and its accordion items (the titles and content).
Each accordion has a title (About Accordion Items) and content (what you’re reading right now). When you click on the title, its content is revealed and any open accordion items close. When you click it again, it will close.
Here’s the second accordion item within the group. You’ll notice that when you click to open this item, the other one closes. This is by design to keep the content compact.
Accordion Group
The accordion group is a container block for the accordion. If you want to add an accordion to your page or post, you’ll add this element, then add as many accordion items inside as needed.
Options
Styles
- Default (color): Choose between a blue or red accent color for the toggles.
- Minimal: A minimal layout with headings and content below–no borders or background colors.
Expand/Collapse All (on/off)
Shows buttons above the accordion container that allow the user to expand or collapse all sections. Default is on.
Heading Tag (h2/h3/h4)
Choose the heading tag for your accordion toggles. This is used for accessibility purposes and for styling the “minimal” headings. Heading tags should go in ascending order (h1 > h2 > h3). If this accordion has a heading above it with h2, for example, the tag should be h3. Default is h3.
Accordion Item
Each section of content will go into an accordion item. Accordion items can be expanded and collapsed as the user navigates your page or post.
Heading
The heading for your accordion content that will display regardless of whether the accordion is expanded or collapsed. The user will click on your heading to toggle between showing/hiding your content.
Content
You can put text, headings, images, and more inside of the accordion item.
Custom Anchor
Allows you to enter a custom, unique identifier so you can externally link to this accordion item on your page. For example, you might put “custom-anchor” in this field. Then, you’ll be able to use it as a link at yoursite.wisc.edu/page-with-accordion#custom-anchor. If you don’t use a custom anchor, one will be automatically generated for you based on the heading.
It is critical that all of your custom anchors are unique (the automatically generated ones will be) or your accordion layout may misbehave or experience accessibility issues.
Advanced
Linking to Accordion Items on Your Page
After creating and publishing a page with an accordion, you’ll notice that when you click on an item, the url in the address bar changes. You’ll see #accordion-name appended. If you copy and paste this link, you’ll be able to share it with others or use it on your site. When they load the page, the accordion item you had selected will be identified, toggled, and automatically scroll into view.
If you are going to be using this behavior, consider using custom anchors. While the automatically generated ones will work in the short-term, they may break if the accordion title changes or another accordion item is created with the same title on the page.