New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Expandables

The Expandable component builds a list of abbreviated copy that when clicked will expand to show additional copy. The expandable component provides the means to create, edit and delete this copy.

When to use it?

Use the expandable component when you want a visually interesting and actionable component to highlight questions or information.

Where to use it?

Use expandables in 1-, 2-, or 3-column spaces as needed.

Risks Associated with Expandables

If a user attempts to search for something on your page using command+F or "find on page" they will not be able to find search any content that is being hidden by the expandable.

How to use it?

  1. Navigate to and open the desired page.
  2. Add a component.
  3. Double-click to open the Expandables component dialog window.
  4. In the Title field, enter in the text you wish to have displayed as the title for the section. Note: this field is not required. If you wish to have a title displayed, make sure to put a check mark in the box next to Display Title.
  5. In the Displayed Text box, type in the content you wish to be visible on the page.
  6. In the Hidden Text box, type in the content that will be hidden from view until the section is expanded. The content in the expanded section may have additional style formatting applied. Highlight the specific text you would like to style, and (you may apply more than one style to the same portions of selected text):
    1. To Bold, Italicize, Strikethrough, Block Quote, or apply a Style: click the appropriate button (or drop-down option) within the Rich Text Editor toolbar
    2. To Link or Edit a Link: click the Link button from the Rich Text Editor toolbar, add/edit the necessary data in the link pop-up window, press OK to save the link information
    3. To Break Linked Text: press the Delete Link button in the Rich Text Editor toolbar
    4. To convert to Ordered or Unordered List: click the ordered/unordered button in the Rich Text Editor toolbar (text will automatically be numbered or bulleted if there are line breaks throughout the text)
    5. To nest or un-nest Ordered or Unordered List items: click the Indent button in the Rich Text Editor toolbar to nest items, and press the Outdent button to un-nest items.
  7. When finished, press the OK button to save the text and see it within the page.
  8. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from the end-user's perspective.

Expandable Example

Website viewers are unable to use the command+F or "Find" function on a page with the exapandable component. Ask yourself if hiding your content is best for your specific page and content.

You can put as many expandables as you need in a column container, keeping in mind that you're trying to collapse your content so its accessible to your audience, not just put all your content on a single page.

Expandables: How to set up an expandable

Example of an expandable component with text that is filled in fields.

Component Tutorials

Still need help?

To report an issue with this component, please contact the IT Service Desk:


Expandable Known Bugs

No known bugs at this time.

Updated January 2013

NYU Footer