University at Buffalo (UB)
Transforming UB’s digital communications.
Collapsible Content Container
Reveal hidden content when title is clicked.
On this page:
Last Reviewed: September 28, 2022
Never put a collapsible component inside another collapsible component. It will break your page.
Accessibility
These components are treated as headings (like a Title).
- Headings must be hierarchical
Using This Component
There is only one tab for settings.
You can immediately adjust settings in Edit Mode, but to modify content inside the container additional steps are required.
- Switch to Preview Mode (click the tool in the top right of the window).
- Expand the container by clicking the '+' icon.
- An 'End' bar will appear and you can now see the hidden content.
- Switch back to Edit Mode.
- You can now click the End bar and then the '+' icon ("Insert component") to add new content.
- Or click any of the previously hidden components to edit them in turn.
- Any component you add will load within the container.
- Once you are done building, return to Preview Mode to close the container or leave it open for convenience.
See the Keyboard Shortcuts for switching between Edit and Preview Modes.
Be Brave, Experiment!
With the exception of another Collapsible Container, most of our components work very well in a Collapsible Container, including Column Controls.
Technical Restrictions
- Never put a collapsible component inside another collapsible component.
Settings
The component opened for editing.
Title: Enter a descriptive heading. By default "Collapsible Content" will be shown.
Start Mode: Choose your preference between Collapsed (default) or Expanded.
ID: Enter to build an anchor for targeted linking. Optional.
Exclude from "on this page" lists: Prevents this title from being included in the On This Page component.
Title size: Required. Sets the heading level and associated size and styling. Choose from:
- Large (H2 default) -- treated as a level 2 Title
- Medium (H3) -- treated as a level 3 Title
- Small (H4) -- treated as a level 4 Title
Accessible heading level override: To satisfy accessibility guidelines (e.g. heading hierarchy), once the Title Size is set you can then change the actual heading level in the HTML code to a different value, while leaving the visible styling as is. Choose from:
- H2 -- styled as selected in Title size but code as level 2.
- H3 -- styled as selected in Title size but code as level 3.
- H4 -- styled as selected in Title size but code as level 4.
- No heading -- styled as selected in Title size but not coded as a heading.
Accessibility Concerns
To satisfy heading hierarchy limitations, this component's heading level can be adjusted independnetlly of its visible styling. Adjust the 'Accessible heading level override’ setting as needed.
Headings, provided by the UBCMS Title component, provide structure to the content on your Web pages. They break up your content into meaningful sections, define its hierarchical structure and provide handy anchors for deep linking or the On This Page component. WebAIM.org calls this semantic structure. Done effectively, this structure allows humans, screen readers and automated search engines to easily digest your page.
Headings in the UBCMS are generally constructed using Title and Collapsible Content Container components.
Best practice: To facilitate navigation and understanding of the overall document structure by both users and search engines, headings should be nested; e.g., one H1 followed by one or more H2's, each H2 followed by one or more H3's, each H3 followed by one or more H4's, and no jumps of more than one step (e.g. an H2 should not be followed by an H4).
For example,
- H1, then H2, then H3... is ok.
- H1, H2, H3, then H2... is ok.
- H1 then H3... is NOT ok.
Additional Reference:
Direct Linking to Collapsible Content
To link to a Collapsible Content Container, first set an ID in its properties, which becomes an anchor. You can now build a direct link to that container, as hashtagID (or /content/.../page#ID), and when the page loads, it will display the container in its expanded mode.
For example, the following link should load the second of the examples at the bottom of this page in expanded mode:
- in Author: /content/www/cmshelp/help/components-library/more/collapsible-content.html#ccc2 or just #ccc2
When you build a targeted link to a Collapsible Content component using its ID, the component will automatically expand when the page is loaded to that location.
Similarly, if you deep link to content that is contained WITHIN a Collapsible Content component, the page will load with that normally hidden content revealed.
See an Example
Some text.
Some text.
Some text.