Accordion Component - v3

Owned by Alexandre Boyle
Last updated: Mar 16, 2023 by Gregory Moore
4 min read

Accordion

Displays text in a collapsed, condensed manner, letting you save space while allowing visitors to scan the titles, and choose to expand an item only if it is of interest.

 

Adding, Moving, & Deleting the Component

All components share the same processes to be added, moved, and deleted.

Editing the Component Content

Hover your mouse cursor over the content preview area and click the yellow Edit button that appears over the top right of the component. A new modal window will open with all of the content fields available for the component.

 

  • Image - Adds an image to the side of the title and description. The image is hidden when the accordion is closed and revealed when opened.

  • Title - Adds a line of styled text above the description. The title will always be displayed when the accordion is closed or open.

  • Description - Adds a block of rich text underneath the title. The description is hidden when the accordion is closed and revealed when opened.

  • Video URL - (Optional) Inserts a Youtube or Vimeo link to the image area and overlays a play button.
    When visitors click anywhere on the image, the video will play in an overlay over the entire page.
    To use the video’s thumbnail, clearing the image field.

Component Options

Clicking the gear icon at the top right of the component’s control bar expands the options where you can adjust the component’s features.

  • Headline - Add a short headline of text to the top of the component.

  • Image Width - Change the width of article images by percentages.

  • Image Float - Three options to float images:

    • Float Left

    • Alternate left and right

    • Float Right

  • Text Wrap - Turn on and off text wrapping around article images.

  • Small Layout - Toggle the font size and padding of the title between a smaller or larger layout.

  • Save - Commit any changes to the options.

Floating Images

The Image Float option allows you to float images and videos on different sides of the text content:

  • Float Left

  • Alternate left and right

  • Float Right

 

Sort Accordion Items

Clicking the Sort button at the top right of the component’s control bar allows you to sort the content items into whatever order you choose.

The Sort button will bring up a modal window to Sort the Content Items.

  1. Find and click the title of the item you want to move.

  2. Use the buttons in the right column to arrange the item in the order you want.

  3. Repeat for each item you want to move.

  4. When all items are arranged to your liking, click the blue OK button in the lower right to confirm your choices.

Deleting Accordion Items

Accordions are deleted one content item at a time.

 

  1. Find the item that you want to delete.

  2. Hover your cursor over the item that you wish to delete.

  3. Hovering reveals the control buttons.

  4. Click the red Delete button.

  5. A message will pop up asking for your confirmation and display the item’s title.

  6. If you clicked by mistake, click the gray Cancel button in the lower right and nothing will be deleted.

  7. To confirm deletion, click the blue OK button in the lower right. The window message will update to tell you that the item was deleted and ask to refresh the page. Click OK again.

  8. The page will refresh and the deleted item will be gone.

If you deleted an item by mistake, it can be recovered from Sitecore Recycle Bin.

Was this helpful? We welcome feedback for this Sitecore documentation: Take the User Survey