Accordion

Panel Title (single-line text)

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

Panel Content (Simple mode only)

• Rich-text content used for the panel content in the “Rich Text Only” variant.

“Placeholder Available” variant Accordion Tab Content

• Panel content is created using component(s).
• Eligible components include Image, Video Player, CTA Button, Rich Text, Table, Column Splitter and Row Splitter.
• Template Data follows component documentation.  

No, this function is not supported using the Accordion.

No, images are not supported in the heading.

If it is the first component in the placeholder:

1. Click the Pages tab at the top of the left side panel to display the Sitemap
2. Click to select the page in the Sitemap.
3. Click “+” button in the mainbody or twothirdsbody placeholder box below the Breadcrumb links.
4. Select Accordion component from list.

If added to a placeholder that already has one or more components:

1. Click the Pages tab at the top of the left side panel to display the Sitemap.
2. Click to select and display the page in the Sitemap.
3. Click the Components tab at top of the left side panel to display the Components menu.
4. Locate Accordion component in the Container group. Drag the Accordion component to an allowed location above or below an existing component in the mainbody or twothirdsbody areas.

The Accordion Tab and toolbar are displayed.

In Page Builder:

To add a first Accordion Tab:

1. Click the purple “+” icon in the placeholder space and select Accordion Tab component from list.
2. Map content to the tab following steps below.

To add additional Accordion Tabs:

1. Drag an Accordion Tab component to the Accordion container to add an additional tab to the Accordion. A dark purple line will display showing where the tab will be added.
2. Map content to the tab following steps below.

Mapping a new Accordion content data source:

3. In the “Assign content item” dialog box, hover over Data until a “+” appears to the right.
4. Click “+” and select "Tab Panel" (previously called “Accordion Tab” or “Accordion with Panel”).
5. Give the component a unique name and click away from the name area on hit the Enter key.
6. Click Assign.

Mapping an existing Accordion content data source:

3. Select the proper Accordion Tab component from the list.
4. Click Assign.

To change mapping to a different content data source:

1. Click on the Accordion Tab to select it. The tab will be outlined with a thick purple line and a toolbar with the panel name will appear.
2. Click the Swap with another component icon on the toolbar.
3. Choose Accordion Tab from the menu.
4. Select the replacement tab from the data sources available and click Assign.

Initially, an Accordion panel appears as the "Rich Text Only" variant, without a title or text. Enter text in both fields, or adjust the variant.

To change the variant of a tab:

The default variant for a new tab is is the “Rich Text Only” variant which uses the Panel Content (Simple mode only) field to contain rich text.

To add alternative content types to the tab, change this tab variant to the Placeholder Available variant:

1. Click on the Accordion Tab to select it. The tab will be outlined with a thick purple line and a toolbar with the panel name will appear.
2. Click the Design Tab in the right side panel.
3. Choose Placeholder Available from the top field variant menu.
4. The tab will now display a “+” icon that can be clicked to assign a component.

To move Accordion Tabs:

1. Click on the Accordion Tab to select it. The tab will be outlined with a thick purple line and a toolbar with the panel name will appear. (Note: It may say “Side Tab Panel.”)
2. Click and hold on the 10-dot handle icon on the component toolbar and move the Accordion Tab to the desired location in the Accordion container. 

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. Video Player
   3. Column Splitter
   4. Row Splitter
   5. CTA Button
   6. Rich Text
   7. Table

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:

4. 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.
5. Give the data source a unique name.
   1. Tip: Include the panel name to more easily match this data source to the correct panel.
6. Click Assign.

To assign an existing data source to an Accordion component:

4. Select the data item.
5. 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.

Locate the Accordion Tab

1. Open Content Editor:
   1. In Page Builder, click the dropdown arrow to the right of the SitecoreAI icon in upper left..
   2. Select Content Editor. It opens in a new browser tab.
2. If the Accordion Tab 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 > site name > Home > page name > Data.
4. Locate and select the Accordion Tab component.

Edit an Accordion Tab

To edit an existing Accordion Tab’s Panel Title or Panel Content field:

1. Click the tab in the Content Tree.
2. Click on Edit or Lock and Edit to lock tab for editing.
3. Change as needed in the main content pane on the right side.
4. Save edits.

To edit existing components in an Accordion Tab:

1. Locate the existing component in the Content Tree
2. Expand an Accordion Tab data if component data is nested under it.
3. Edit component data following standard component procedure.
4. Save edits.

To create a new content type in an Accordion Tab:

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

Tips for Using Images

• Alt Text should be added to images and saved in the media library folder, but can be overridden in Page Builder in the image’s “Image alt text” field or the “Alternate Text” field in Image > Properties in 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 an Accordion Tab

1. Locate and expand the Accordion Tab component.
2. In the Content Tree, right-click the tab.
3. 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 submit the page to the publishing workflow.