Skip to content
Placer County, CA
Return to Home Placer County

Expanding Elements

Expanding elements are useful when a page has large amounts of content that may be overwhelming to users and require excessive scrolling if everything is displayed at once.

Instead, content is organized into smaller digestible chunks, each with its own heading. The headings remain visible, while the content for each section is hidden from view until the user clicks the heading, which toggles the display of content on the screen.

Advantages of expanding content

  • They take up less vertical space when collapsed, yet can display more information once expanded.
  • They provide users with a higher level of control over the information they interact with at any given time.
  • They let the user “drill-down” within the page to find the content they desire.

When to use expanding content

  • When the amount of content is large and it can be grouped into smaller chunks.
  • When content is organized in way that allows users to drill down into sections of related content.

    Three types of expanding elements

    1. Expanding Headlines: used to break content into different sections of information. For example, committee pages have sections for “purpose,” “composition,” “meetings,” “compensation.” Each section is unique and appropriate for Expanding Headlines.
    2. Expanding Links: used to create a list of items that are often related, which can be expanded to see more details. An example of this is the list of members on the committee pages, where clicking on a member’s name expands the contact details for the member.
    3. + More: used to hide a continuation of content that may not be needed by all users, such as additional “about us” information that may not be relevant for many visitors.

    How to add expanding elements

    Following are example of the three expanding elements, with instructions for adding the elements to your pages.

      Add Expanding Headlines

      Expanding Headlines are added in the Sitecore Editor by carefully entering special text to indicate which content should be the heading text and what content should be placed in the expanding content panel.

      1. The heading must be on its own line, formatted as a Heading 2 with the word “expand” in single parentheses at the end of the line.
      2. The next line indicates the beginning of the content that is placed in the hidden panel. Enter two opening parentheses on this line and nothing else.
      3. The following lines contain all the content you want displayed in the panel.
      4. Following your content, enter a new line and type two closing double-parentheses, and nothing else.

      Here's what it looks like in the Sitecore Editor:

      You can also add Expanding Headlines to your page using the Insert Expanding Headline snippet, replacing the placeholder text with your own.

      Add Expanding Links

      Expanding Links are added in the Sitecore Editor by carefully entering special text to indicate which content should be the heading text and what content should be placed in the expanding content panel.

      1. The heading must be on its own line, formatted as a plain paragraph with the word “expand” in single parentheses at the end of the line.
      2. The next line indicates the beginning of the content that is placed in the hidden panel. Enter two opening parentheses on this line and nothing else.
      3. The following lines contain all the content you want displayed in the panel.
      4. Following your content, enter a new line and type two closing double-parentheses, and nothing else.

      Here's what it looks like in the Sitecore Editor:

       

      You can also add Expanding Links to your page using the Insert Expanding Headline snippet, replacing the placeholder text with your own.

      Add + More +more

      Adding the + More element to your page requires carefully entering special text to indicate where the + More link should be displayed and  what content should be placed in the expanding content panel.

      1. At the end of the text where you want the + More link to appear, type a + symbol followed by the word "more" in lowercase letters. There should be no space between the + and the word more.
      2. The next line indicates the beginning of the content that is placed in the hidden panel. Enter two opening parentheses on this line, then a space and the word "more" and nothing else.
      3. The following lines contain all the content you want displayed in the panel.
      4. Following your content, enter a new line and type two closing double-parentheses, and nothing else.

      Here's what it looks like in the Sitecore Editor:

       

      Top