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

Use Expandables

  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.
Expandables: How to set up an expandable

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

Expandable Example

Button: display or hide Why use expandables?

Expandables are used for a number of reasons.  Primarily, they can collapse an excessive amount of content into a far more accessible space by highlighting key topics and hiding the description of that content.

Button: display or hide Where should I use expandables?

Expandables are like the FAQ component, but unlike the FAQ component, they should be used in smaller spaces for more precise information.  1- or 2- columns is the right place for an expandable.

Button: display or hide How many expandables can I put in a row?

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.

NYU Footer