Expandable Content Block

expandable content block example
Click to see a larger version

The Expandable Content block is an excellent content management tool that formats content as tabs or accordions. Use the block to organize and present a lot of information in one place. Visitors can easily scan the tabs to find the information they are looking for.

Demo: Expandable Content Block

Create an Expandable Content Block

  1. Navigate to the page you'd like to update, and click Edit on the page.
  2. Click on the Layout tab.
  3. Choose or add a Section to place the block
  4. Click Add block.
  5. Click Create Content Block.
  6. Scroll down and select Expandable Content.
  7. Choose Inline or Reusable block option.

Note: Select Inline block if this block will only appear on this page. Select Reusable block  if this block needs to appear on multiple pages. When in doubt create an Inline block. Inline blocks may be converted to reusable blocks at a later time if needed. Learn more about Inline and Reusable blocks.

Configure an Expandable Content Block

  1. Title: a title that will display above the block when placed on a page.
  2. Title Display: toggle on or off to display the block title

Expandable Content Block Options

  1. Content Type: (mobile devices display tabs as an accordion )
    1. Accordion: vertically stacked list of headers that can be clicked to reveal or hide content associated with them.
    2. Tabs - Horizontal: tabs displayed horizontally on the page.
    3. Tabs - Vertical: tabs displayed vertically on the page.
  2. Open first section: this option is selected by default. Open first section means that the first section won't require users to click on it to expand it – it will already be expanded. Uncheck the box to have the first section collapsed with the rest of the sections.

Add Expandable Content Sections

The Expandable block is made up of sections of content. Each section has the following tabs:

  1. Expandable Content Title: a title is required.
  2. Expandable Content Body: enter the body content for each section.
  3. Add more sections by clicking Add Expandable Content Text.
Click to see a larger version

Save Block

  1. Click Add Block when done.
  2. Click Save layout.

Edit Expandable Content Sections

  1. Navigate to the page you'd like to update, and click Edit on the page.
  2. Click on the Layout tab.
  3. On the right-hand side of each block is a pencil icon button representing the configuration options – click on this, then “Configure” to edit the block.
  4. Use the Expand Collapse Formatter to make it easier to manage and find content within the block. You may collapse one section at a time or all at once.
    1. Collapse All: collapse all sections to view the section titles
    2. Collapse: collapse individual sections.
    3. Delete: remove a section of content.
    4. Duplicate: make a copy of a section of content.
    5. Edit All: expand all sections to view the section content.
    6. Edit: expand a collapsed section to edit the content.
  5. Make your edits.
  6. Click Update.
  7. Click Save the page.

Note: You may need to hide the sidebar panel to see the right-hand side of the block and the pencil icon button.

Rearrange Expandable Content Sections

You may rearrange sections in the expandable content block.

  1. Drag and Drop: click on the crosshairs to the left of each section and drag it to the order you would like it to appear.
  2. Numerical: click on Show row weights and add your desired order to the numeric weight fields.

Related Articles