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.

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 leavel 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.

Direct Linking to a Collapsible Container

  1. To link to a Collapsible Content Container, you must first set an ID in its properties, which becomes an anchor. You can now build a direct link to that container, as hashtag + the ID, and when the page loads, it will display the container in its expanded mode.

    For example, each of the following links will load the examples at the top right of the page in expanded mode:
  2. To link to an expanded container ON THE SAME PAGE, just use #ID as the relative URL in the link.

    For example, this links to the second example, expanded:
  3. You can also link to an anchor INSIDE a collapsible container, and the page will correspondingly load at that anchor, with the container expanded.
    This loads the first example expanded, at the location of the subheading which is ID'd as 'sub-head.'

Restrictions

  • Never put a collapsible component inside another collapsible component.

Was This Page Helpful?

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

On this page:

See an Example:

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

Last Revised:

March 12, 2018