Accordion

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

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.

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:

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

If using existing Accordion Data (content):

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

The Accordion Tab and toolbar are displayed.

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. 

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

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

1. Click the Accordion to display the toolbar.

2. Click the Explorer icon.

   

3. In left pane, locate the Accordion and click to select.

4. Locate and click the panel to select it.
    

   

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.

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.