Collapsible Content Component

This component allows content to be hidden on a page until the user clicks its title.  (The content can be hidden or revealed as the default state.)

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

Using This Component

Add the component to the page. There is only one tab.

The Collapsible Content component in its default state.

The Collapsible Content component in its default state.

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.

Be Brave, Experiment!

With the exception of another Collapsible Container, all of our components generally work very well in a Collapsible Container, including Column Controls.

Once this component is on your page, you can then add additional components within it, such as Body Text, Photos or Lists. Just drag and drop new components right between the two gray bars.  The component will expand to accept them.  If necessary, click the "+" to expand the component, and then click the "-" to collapse it again as you go.

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.

Restrictions

  • Never put a collapsible component inside another collapsible component.

Was This Information Helpful?

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

On this page:

See an Example:

See more examples:

Learn how to place a quick link to the top of your page.

Last Revised:

March 12, 2018