Skip navigation links
Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Accordion

Accordion

Headings, displayed vertically and stacked, that expand to reveal panels containing rich text content. Visitors can click the headings to show or hide a panel’s content.

accordion-sample
Figure 1: The initial display of the accordion has all panels in a collapsed state.
accordion-expanded-sample
Figure 2: Clicking a panel title expands the panel. Here, one of the panels has been expanded.

 

Component Information

Benefits

  • Organizes content in a compact space. Related content is organized and displayed in sections.
  • Efficiently presents content and minimizes page length and scrolling. This is especially helpful for mobile users.
  • Presents content in a way that allows visitors to read a list of headings, or topics, and then expand panels to view only the content for topics that are of interest.
  • Allows the content author to hide detailed content until the website visitor is ready to view it while providing a panel heading to indicate what content will be found within the panel.
  • Remains active for search engines to crawl even though the content is not always visible.

Example Use Cases

  • Provide a list of headings as scannable topics so that visitors only open the headings for content they want to see.
  • Provide a menu of all topics. The visitor can quickly scan panel headings and locate specific topics of interest.
  • Provide a “big picture” to the visitor before they view all the details.

Template Data

  • There are no fields in this section. 
  • The component has a unique name (used as internal Sitecore identifier).

Frequently Asked Questions

No, this function is not supported using the Accordion.

No, images are not supported in the heading.

Instructions for Use

Note: the Accordion component was recently rebuilt resulting in some changes in how they are constructed. Any accordions built before this change will still work with the former instructions.

In Pages:

  1. Select the page in the Content Tree.
  2. Click “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Accordion component from list.

Alternate method:

  1. Click Components tab at top of Content Tree.
  2. Locate Accordion component.
  3. Drag the Accordion component to any empty placeholder area of the page below the Breadcrumb links.

If this is new Accordion content:

  1. In the “Assign content item” dialog box, hover over Data until a “+” appears to the right.
  2. Click “+” and select "Accordion Tab" (formerly “Accordion with Panel”).
  3. Give component a unique name and click off the name area.
  4. Click Assign.

If using existing Accordion Data (content):

  1. Select the proper Accordion Tab component from the list.
  2. Click Assign.

The Accordion Tab and toolbar are displayed.

Screenshot showing what the Accordion component looks like when initially placed on the page.
Figure 3: The Accordion component has been placed on the page

In Pages:

  1. Drag an Accordion Tab component to the Accordion container to add another tab to the accordion.

If this is new Accordion content:

  1. In the “Assign content item” dialog box, hover over Data until a “+” appears to the right.
  2. Click “+” and select "Accordion Tab" (formerly “Accordion with Panel”).
  3. Give component a unique name and click off the name area.
  4. Click Assign.

If using existing Accordion Data (content):

  1. Select the proper Accordion Tab component from the list.
  2. Click Assign.

To move Accordion Tabs:

  1. Select an Accordion Tab

  2. Click on the Move up or Move down arrow icons

  3. Or click and hold on the 10-dot handle on the component toolbar and move the Accordion Tab to the desired location in the Accordion container. 

Former instructions:

In Pages:

  1. Click the Accordion component to display the toolbar.
  2. In “Accordion” right column, expand Manage items.
  3. Change Item 1, which is automatically created, as needed:
    1. Rename — Click “…” to right of Item and give it a new name.
    2. Delete item — Click “…” to right of item and delete it.
  4. Add more panels as needed:
    1. Click “+ Add new” and click Accordion Tab button. 
    2. Give it a unique name.
  5. To rename a panel: Click “…” to right of the item and give it a new name.
  6. To delete a panel: Click “…” to the right of the item and delete it.
  7. To reorder panels: Click “…” and use the up and down arrows to change the tab order.

Initially, an Accordion panel appears without a title. The content area contains a “+” button.

Screenshot showing what the Accordion component looks like when initially placed on the page.
Figure 4: The initial appearance of an Accordion tab shows placeholder text for an empty title field and a button to add content.

In Pages:

  1. In the middle pane, or content pane, add an Accordion tab title by typing in the rich text field. The title is the panel Heading. Initially, title is set to “[No text in field].”
  2. In the panel content area below the title, click the blue “+” and select a type of content to add.
  3. Select any permitted component from the dialog box. Permitted components include:
    1. Image
    2. Column Splitter
    3. Row Splitter
    4. MSU Rich Text
    5. Video Player

Alternate method: Click Components tab at the top of the content tree. Drag a component into the Accordion panel placeholder box.

To assign a new component data source to an Accordion component:

  1. Click “+” to the right of the Accordion Tab to nest the accordion content underneath the parent Accordion container (content may also be added to the main Data level).
  2. Give the data source a unique name.
    1. Tip: Include the panel name to more easily match this data source to the correct panel.
  3. Click Assign.

To assign an existing data source to an Accordion component:

  1. Select the data item.
  2. Click Assign.

Repeat as necessary to add all panels and to add content to all panels. Follow instructions for specific components being added to panels.

Note for images: For regular desktop devices (1280px width), the panel image width is 1046px and the image displays by default with a width of 800px. The image’s aspect ratio determines the height. Use Content Editor to change image size using the image Properties link. The Alt Text field is available to update in Explorer and Content Editor, not Pages.
  1. Click the Accordion to display the toolbar.

  2. Click the Explorer icon.

    accordion-explorer-icon
    Figure 5: The Explorer icon in the Accordion toolbar.
  3. In left pane, locate the Accordion and click to select.

  4. Locate and click the panel to select it.
     

    accordion-explorer-panel-selection
    Figure 6: In this example, the second panel of Accordion 1 has been selected for editing.
  5. Locate and click the content type to change. Make changes in the right pane.
  6. To create a new content type:
    • Click “+ Create” in the content column.
    • Give the content a unique name and click the checkmark icon.
    • Add content.
  7. To edit existing Accordion panel:
    • Click an Accordion item in Accordion panel column.
    • Change content in right pane.
  8. To delete an Accordion panel:
    • Click an Accordion item in Accordion panel column.
    • Click “…” in right pane.
    • Click Delete.
  9. Return to Pages by closing the Explorer browser tab.
  10. Refresh the screen.
  11. Preview and publish the page.

Locate the Accordion

  1. Open Content Editor:
    1. In Pages, click 9-dot cube in upper left.
    2. Select environment.
    3. Select Content Editor. It opens in a new browser tab.
  2. If the Accordion does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
  3. In the Content Tree, expand Content > MSU > sitename > Home > page name > Data.
  4. Locate and expand the Accordion component.

Add a Panel

  1. Right-click the Accordion component.
  2. Select Insert, then select Accordion Tab.
  3. Add content in the main pane on the right side.
Note: New panels and content types can also be created by duplicating an existing panel with the correct content type, then changing the name and content.

Edit a Panel

To edit an existing panel:

  1. Click and expand the panel in the Content Tree.
  2. Change as needed in the main content pane on the right side.

To create a new content type in a panel:

  1. Right-click the panel.
  2. Select Insert and select a content type (column and row splitters need to be added in Pages).
  3. Add content in the main content pane on the right side.

Tips for Using Images

  • Alt Text can be changed in Explorer or Content Editor.
  • An image size can be changed in Content Editor > Image > Properties. HTML uses width and height attributes.
  • The image margin (i.e., padding) can be changed in Content Editor > Image > Properties.
  • For regular desktop devices (1280px width), the panel image width is 1046px and the image displays by default with a width of 800px.
  • The image’s aspect ratio determines the height.

Delete a Panel

  1. Locate and expand the Accordion Tab component.
  2. In the Content Tree, right-click the panel.
  3. Click Delete and confirm.

Delete the Accordion

  1. In the Content Tree, right-click the Accordion Tab.
  2. Click Delete and confirm.

Publish Changes

When done with content authoring activities:

  1. Return to Pages.
  2. Refresh the screen or use Reload to see changes.
  3. Preview and publish the page.

Tool Use Guide

 

 PagesExplorerContent Editor
Add componentOptimal  
Add panelsOptimalPossiblePossible
Rename panelsOptimalPossiblePossible
Delete panelsOptimalPossiblePossible
Copy panelsOptimalPossiblePossible
Reorder panelsOptimalPossiblePossible
Add content to panel*OptimalPossiblePossible

*Add content type and then follow component-specific instructions

 

Documentation updated: Oct. 23, 2024

XMC Component Guide