The Accordion enhancement makes a widget's contents collapsible. This can reduce clutter and information overload on information-dense pages by presenting content based on the user's needs. Widgets with this enhancement display as buttons with their title as the button's label. Users can select them to either show or hide the widget's contents.
Sections in this article:
- Considerations
- Set up the enhancement
- Configure the enhancement
- Turn the enhancement on
- Turn the enhancement off
- Use the enhancement
Considerations
- Widget titles: You must put a title on widgets that use the Accordion enhancement and do not use title links.
-
Widgets: Do not use the following widgets with the Accordion enhancement:
- RSS Feed widget.
- Links widget (The Links widget provides its own accordion functionality.)
- Photos in Folder widget
- Widget Tabs enhancement: The Widget Tabs enhancement can only be used with the Accordion enhancement if the Accordion enhancement is not placed in the first widget in the tab. See the Create Tabs with the content in accordions section of the Widget Tabs enhancement article for setup instructions.
Set up the enhancement
To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.
Add enhancement code to the header
Warning
Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.
Add the following code to the header of your digital workplace:
<!-- Accordion enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/accordion/accordion.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/solution-extensions/accordion.css" />
<!-- Accordion enhancement ends-->Configure the enhancement
The Accordion enhancement can be used with any compatible widget. To configure the widget:
- Navigate to the page you want to edit.
- Select
Actions and then Edit.
- Place a compatible widget or select Edit on the widget.
- Configure the widget as needed in the Options tab. The widget must have a title.
- In the Appearance tab, in Class, enter the following:
accordion. For more information, see Applying custom CSS to widgets. - Select Update.
- Select Publish Page.
Turn the enhancement on
Once the code has been placed, the enhancement is ready to be used. If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and --> after the middle two lines, and save the changes to the header.
Turn the enhancement off
To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle two lines, as shown below, and save the changes to the header.
<!-- Accordion enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/accordion/accordion.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/solution-extensions/accordion.css" />
<!-- Accordion enhancement ends-->Changes to:
<!-- Accordion enhancement begins -->
<!-- <script src="https://igloo-prod.azureedge.net/cmedia/enhancements/accordion/accordion.js"></script> -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/solution-extensions/accordion.css" /> -->
<!-- Accordion enhancement ends-->Use the enhancement
Members can select the accordion bar to expand or collapse the contents of the accordion widget.