Collapsible Content Component

Reveal hidden content when title is clicked.

Flex UI Classic

On this page:

Never put a collapsible component inside another collapsible component. It will break your page.

Last Reviewed: April 14, 2021

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.

Settings

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. Select from

  • Large (default) -- same as level 2 Title
  • Medium -- same as level 3 Title
  • Small -- same as level 4 Title
The component opened for editing.

The component opened for editing.

Restrictions

  • Never put a collapsible component inside another collapsible component.

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:

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

More examples:

Was This Information Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)