Edit

Share via


Accordion module

Note

The Retail Interest Group by Dynamics 365 Commerce has moved from Yammer to Viva Engage. If you don't have access to the new Viva Engage community, fill out this form (https://aka.ms/JoinD365commerceVivaEngageCommunity) to be added and stay engaged in the latest discussions.

This article covers accordion modules and describes how to add them to site pages in Microsoft Dynamics 365 Commerce.

Accordion modules are container-like modules that organize the information or modules on a page by providing a collapsible drawer-like capability. Use an accordion module on any page.

Add one or more accordion item modules inside every accordion module. Each accordion item module represents a collapsible drawer. Add one or more modules inside every accordion item module. There are no restrictions on the types of modules that you can add to an accordion item module.

The following image shows an example of an accordion module that organizes information on a frequently asked questions (FAQ) page.

Screenshot of an accordion module.

Accordion module properties

Property name Values Description
Heading Text Enter an optional text heading for the accordion module.
Expand All True or False If you set the value to True, turn on the expand/collapse functionality, so that all items in the accordion module can be expanded and collapsed.
Interaction Style Independent or Expand one item only Define the style of interaction for accordion items. If you set the value to Independent, each accordion item can be expanded or collapsed independently. If you set the value to Expand one item only, only one item can be expanded at a time. As items are expanded, previously expanded items are collapsed.

Accordion item module properties

Property name Values Description
Title Text Enter the title text for the accordion item module. When a user selects the title region, they can expand or collapse the section.
Expand by default True or False If you set the value to True, the accordion item is expanded by default when the page is loaded.

Add an accordion module to a FAQ page

To add an accordion module to a FAQ page and set its properties in site builder, follow these steps:

  1. Go to Pages, and use the Fabrikam marketing template (or any template that has no restrictions) to create a new page named Store FAQ.
  2. In the Main slot of the Default page, select the ellipsis (...), and then select Add module.
  3. In the Select modules dialog box, select the Container module, and then select OK.
  4. In the Container slot, select the ellipsis (...), and then select Add module.
  5. In the Select modules dialog box, select the Accordion module, and then select OK.
  6. In the property pane of the accordion module, select Heading next to the pencil symbol.
  7. In the Heading dialog box, under Heading Text, enter Frequently asked questions. Then select OK.
  8. In the property pane of the accordion module, select the Show expand all check box, and then, in the Interaction style field, select Independent.
  9. In the Accordion slot, select the ellipsis (...), and then select Add module.
  10. In the Select modules dialog box, select the Accordion item module, and then select OK.
  11. In the property pane of the accordion item module, under Title, enter title text (for example, How do returns work?).
  12. In the Accordion item slot, select the ellipsis (...), and then select Add module.
  13. In the Select modules dialog box, select the Text block module, and then select OK.
  14. In the property pane of the text block module, enter a paragraph of text (for example, Returns must be processed via the call center. Contact 1-800-FABRIKAM for returns. Products have a 30-day return policy. Returns must be initiated within this time frame.).
  15. In the Accordion slot, add a few more accordion item modules. In each accordion item module, add a text block module that has content.
  16. Select Save, and then select Preview to preview the page. The page shows an accordion module that has the content that you added.
  17. Select Finish editing to check in the page, and then select Publish to publish it.

Additional resources

Module library overview

Container module

Tab module

Text block module