Accordion

Panel 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 is created using component(s).
• Eligible components include Image, Video Player, CTA Button, Rich Text, Table, Column Splitter and Row Splitter.  

Image (image item)

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

Image path (content tree URL)

• Shows the path URL of the mapped image asset.

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

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.

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

Caption (single-line text)

• Optional text that displays under an image.

Title (single-line text)

• Title to appear in white text, all caps, in the top line of text at the bottom left corner of the video thumbnail.
• Optional field.
• Be aware of color contrast when using this field. Text appears in white. The video thumbnail image should be dark enough that color contrast does not pose any accessibility concerns.

Caption

• Caption to appear in white text, as typed, below the Title text at the bottom left corner of the video thumbnail.
• Optional field.
• Be aware of color contrast when using this field. Text appears in white. The video thumbnail image should be dark enough that color contrast does not pose any accessibility concerns.

Media

• Video file selected for display
• Tip: Users must enter this field OR the YouTube ID, Vimeo ID or Kaltura Embed to display a video.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

Video Captions

• Caption file for video uploaded into the component.
• Tip: If using YouTube ID, Vimeo ID or Kaltura Embed this field can be skipped. Caption files should be uploaded where the video is hosted.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

Video Thumbnail Image

• Thumbnail image file for video uploaded into the component.
• Tip: If using YouTube ID, Vimeo ID or Kaltura Embed this field can be skipped. Thumbnails should be uploaded where the video is hosted.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

Image path

• Shows the path URL of the mapped image asset for the video thumbnail.

Image alt text (single-line text)

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

YouTube ID (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. Do not enter anything in the Media field, Vimeo ID field or Kaltura Embed field if using a Vimeo ID.

Vimeo ID (single-line text)

• The identifier, or ID, of the Vimeo video to display.
• Tip: Users must enter this field OR the Media field to display a video. Do not enter anything in the Media field, YouTube ID field or Kaltura Embed field if using a Vimeo ID.

Kaltura Embed (single-line text)

• The “src” attribute from the Kaltura embed iFrame tag for the video to display.
• Tip: Users must enter this field OR the Media field to display a video. Do not enter anything in the Media field, YouTube ID field or Vimeo ID field if using a Kaltura Embed.

Title (single-line text)

• Title to appear in white text, all caps, in the top line of text at the bottom left corner of the video thumbnail.
• Optional field.
• Be aware of color contrast when using this field. Text appears in white. The video thumbnail image should be dark enough that color contrast does not pose any accessibility concerns.

Caption

• Caption to appear in white text, as typed, below the Title text at the bottom left corner of the video thumbnail.
• Optional field.
• Be aware of color contrast when using this field. Text appears in white. The video thumbnail image should be dark enough that color contrast does not pose any accessibility concerns.

Media

• Video file selected for display
• Tip: Users must enter this field OR the YouTube ID, Vimeo ID or Kaltura Embed to display a video.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

Video Captions

• Caption file for video uploaded into the component.
• Tip: If using YouTube ID, Vimeo ID or Kaltura Embed this field can be skipped. Caption files should be uploaded where the video is hosted.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

Video Thumbnail Image

• Thumbnail image file for video uploaded into the component.
• Tip: If using YouTube ID, Vimeo ID or Kaltura Embed this field can be skipped. Thumbnails should be uploaded where the video is hosted.
• Browse media library – Opens the media library. Users can select an existing media asset or upload a new asset in the library. 

YouTube ID (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. Do not enter anything in the Media field, Vimeo ID field or Kaltura Embed field if using a Vimeo ID.

Vimeo ID (single-line text)

• The identifier, or ID, of the Vimeo video to display.
• Tip: Users must enter this field OR the Media field to display a video. Do not enter anything in the Media field, YouTube ID field or Kaltura Embed field if using a Vimeo ID.

Kaltura Embed (single-line text)

• The “src” attribute from the Kalture embed iFrame tag for the video to display.
• Tip: Users must enter this field OR the Media field to display a video. Do not enter anything in the Media field, YouTube ID field or Vimeo ID field if using a Kaltura Embed.

No, this function is not supported using the Accordion.

No, images are not supported in the heading.

In Page Builder:

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 any Placeholder box below the Breadcrumb links.
4. Select Accordion component from list.

Alternate method:

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 any empty placeholder area of the page below the Breadcrumb links.

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.

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. 

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

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

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 > site name > 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.

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.