Back to Top
Skip to Site Search Skip to Utility Nav Skip to Top Nav Skip to Left Nav Skip to Content
Close Main Menu

Creating an Expandable Block

Overview

Expandable blocks are great for saving space on the page, allowing your visitor to quickly scan headings without scrolling and view the content they wish to see, one section at a time. This is particularly useful for FAQs.

Objective

Learn how to create a new expandable block. 

Example

White Heading

This is the text that you put into the wysiwyg, or text editing area, for the block. Adding text here allow you to add hyperlinks into your text. It also allows for more text. Here is one more sentence.

Why use Expandables?

Expandables allow you to place lots of content on the page and allow your visitor to quickly skim headings to find they content they are seeking. This is also useful for FAQs in a question/answer format.

Instructions

Create a new expandable block (Inline Metadata):

  1. In the left panel click on the “_blocks/manual” folder. (All blocks are stored here. You may also add additional folders in this section to organize your blocks.)
Location of blocks in Cascade
  1. On the blue menu bar above, click “New.”
  2. From the popup, mouse over “Blocks” and choose “Expandable-Tabs.”
New menu - Expandable/Tabs block
  1. Title:  exp content name. (Preface your expandable names with “exp” to help in identifying expandable content. This becomes the filename and is converted to all lowercase with hyphens.)
  2. Description: (optional) This will only be visible by anyone who can edit this block and does not show up on the web page. Use it to make notes about this block as a reminder to yourself and other editors.
Title and filename of expandable block in Cascade

Set up display options (expandable)(leave all options as is):

  1. Display Options:  Leave it set to “expandable.”
  2. Shrink expandable option: Leave box unchecked.
  3. Allowed Format: Leave set to “Standard and Mobile.”
Expandable block options Cascade

Set up header and content (expandable >> section):

  1. Header: Enter the heading (this can be in the form of a question for FAQs).
  2. Content: Add your content in the WYSIWYG area. (You can have text, data tables, images, etc.)
  3. Add another section by clicking the “+” sign.
  4. Repeat steps 1 & 2 for each section.

Pull in another block to a section (optional):

  1. Click the “lego” icon below the WYSIWYG area.
  2. In the popup search for and select the block to insert.

Note: You can pull in another block to an expandable section to supplement or replace the content in the WYSIWYG area. An example is pulling in a reusable block of an announcement or RSS feed into this particular expandable section.

Filling in header and content area for expandable block in Cascade

Send to Workflow

  1. Click “Send to Workflow."
  2. At the Spell Check screen, click "Submit."
  3. At the "Start Workflow" screen, tell us what you did in the "Comments" box. This helps us tremendously in the approval process.
  4. Click "Submit."

Note:  Remember that you cannot add your new block to a page until it has been sent to workflow and approved.

Filling in the comments box in the workflow in Cascade
  • Access to either the training web site or as a web editor to your site.
  • Cascade: Basic I II training

Summary

Questions:

Categories:

  • blue site
  • flex site
  • site structure
  • create

Last Updated:

9/9/2015

UNG follows Section 508 Standards and WCAG 2.0 for web accessibility. If you require the content on this web page in another format, please contact the ADA Coordinator.

Back to Top