University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

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.

The Collapsible Content component in its default state.

Using This Component

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

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. Normally it is treated as a level 2 title.

Title size:

  • Select from Large (default), Medium, or Small.
  • Required.
  • See examples at right.
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:

See an Example:

Large (default)

Hello world.

This is the first example.

a subheading

The above subheading acts as an anchor.

Medium

Hello world.

This is the second example.

Small

Hello world.

This is the third example.

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

Last Revised:

February 13, 2017