Skip navigation links

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).

Accordion Tab Title (single-line text)

  • Heading for the panel. This displays even if the panel content is hidden.
  • Required field.

Accordion Tab Content (multi-line text)

  • Panel content. This displays when the panel’s title is clicked.
  • May contain rich text content.
  • Has an abbreviated Rich Text Editor, or RTE, toolbar.

Image (image item)

  • Full-width image fills the entire content area.
  • Required field.
  • Recommended image size: 800 pixels (width); any height

Alt Text (single-line text)

  • Alternative text description of the image that is read by screen readers. This is provided for the benefit of visitors who cannot see the image.

TargetUrl (button selector)

  • Select the type of link destination. Choose one option.
  • Values: Internal, External or Media

Insert path (general link)

  • The path to the image item. Enter a fully specified path (image URL) or click Browse to select from the Content Tree.
  • Required field.

Link text (single-line text)

  • Text that displays as the hyperlink. Enter a fully specified path (URL) or click Browse to select a page from the Content Tree.
  • Required field.

Link title (single-line text)

  • Text that displays as a tooltip when visitors hover the cursor over the link

URL query string (single-line text)

  • Parameters appended to the end of a URL, preceded by “?”
  • Example use cases: language and site, name of a Tabs panel
  • Sample format: http://linkaddress.edu/?insertparameters

Anchor (single-line text)

  • ID of an anchor tag, or <a>, in the current or another page, appended to the URL following “#”
  • Clicking the link jumps to the anchor tag location rather than displaying the linked page from the top.

Open in a new tab (checkbox)

  • Determines the browser behavior when a link is clicked.
  • Values:
    • Unchecked (default) — Opens the link in the same browser tab
    • Checked — Opens the link in new browser tab or window (depending on the visitor’s browser setting)

ImageCaption (single-line text)

  • Optional text that displays under an image.

Image (image item)

  • Full-width image fills the entire content area.
  • Required field.
  • Recommended image size: 800 pixels (width); any height

Image Properties: Click Properties link above the image to open a dialog box to change image properties and to add or change the Alt Text field.

Alt Text (single-line text)

  • Alternative text description of the image that is read by screen readers. This is provided for the benefit of visitors who cannot see the image.

Width and height (numbers)

  • Change the width or height of the image.
  • This does not affect the original image, only this reference to the image.
  • Aspect ratio is maintained. When one dimension is changed, the other is automatically changed to match the aspect ratio.

Horizontal and vertical space (numbers)

  • Add white space around the image.
  • Example: An entered value of 10 is equal to 10 pixels.
  • This is the same as using the margin cascading style sheet, or CSS, property.

URL (general link)

  • The destination of a link, such as text used as a call to action to drive visitors to another webpage or website.
  • Options:
    • Insert DAM link
    • Insert link
    • Insert media link
    • Insert external link
    • Clear

Title (single-line text)

  • Optional title that displays below the video

Caption (single-line text)

  • Optional text caption

Media (general link)

  • Video file selected for display
  • Tip: Users must enter this field OR the YouTube ID to display a video.
  • Options:
    • Upload — Click and upload a file from content author’s computer. The maximum file size is 2 GB.
    • Browse media library — Click and select a video file from Media Library.

VideoCaptions (general link)

  • The path (location) of a captioning file for the selected video
    • Upload — Click and upload a captioning file from the content author’s computer. The maximum file size is 2 GB.
    • Browse media library — Click and select a captioning file from Media Library.

YouTubeID (single-line text)

  • The identifier, or ID, of the YouTube video to display. The ID is part of the YouTube URL for the video and appears following the “=” in the URL.
  • Example, with identifier shown in bold: https://www.youtube.com/watch?v=T9Mc-YS35y0 
  • Tip: Users must enter this field OR the Media field to display a video.

Media (general link)

  • Video file selected for display
  • Tip: Users must enter this field OR the YouTube ID to display a video.
  • Options:
    • Open file — Click and select a video file from Media Library.
    • Upload — Click and upload a file from content author’s computer.
    • View file — Click and view the selected file that appears in Media text box.
    • Clear — Remove video file selection.
    • Open DAM file — Click and select a video file from the Digital Asset Management system.

YouTubeID (single-line text)

  • The identifier, or ID, of the YouTube video to display. The ID is part of the YouTube URL for the video and appears following the “=” in the URL.
  • Example, with identifier shown in bold: https://www.youtube.com/watch?v=T9Mc-YS35y0 
  • Tip: Users must enter this field OR the Media field to display a video.

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 rebuilt in the fall of 2024 resulting in some changes in how they are constructed. Any accordions built before this change will still work using the instructions for the previous version (see "Add Accordion Tabs to an Accordion Component," below).

In Page Builder:

  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 Page Builder:

  1. Drag an Accordion Tab component to the Accordion container to add an additional 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" (previously called “Accordion with Panel”).
  3. Give the component a unique name and click away from the name area on hit the Enter key.
  4. Click Assign.

If using an existing Accordion content data source:

  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. Alternate method: 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. 

Instructions for previous iteration of Accordion:

In Page Builder:

  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 Page Builder:

  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. Ccontent 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 to the Accordion and to add content to all panels. Follow the 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. Image alt text can be edited using the Alt Text field in Explorer and Content Editor, but 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 check mark 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 Page Builder by closing the Explorer browser tab.
  10. Refresh the canvas.
  11. Preview and publish the page.

Locate the Accordion

  1. Open Content Editor:
    1. In Page Builder, click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left..
    2. 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 Page Builder.
  2. Click the Reload canvas icon to see changes.
  3. Preview and publish the page.

Tool Use Guide

 

 Page BuilderExplorerContent 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: Feb. 7, 2025