Add an accordion widget to an Adobe Captivate project

Add the number of accordions in the widget. You can add a maximum of 20 accordions.

In the Components section of Visual Properties, you can add the following:

• Title – Select this to add a title for the accordion widget.
• Body – Select this to add a brief description of the procedure or steps that will be covered in the accordion.
• Instruction – Select this to guide the learners to interact with the tabs inside the accordion.
• Navigation buttons: Select the previous and next buttons to allow users to navigate between slides.

Expand the Alignment and Spacing section to adjust padding or content spacing. Use the Content width slider to align the content horizontally or set padding values individually. Use the Content spacing slider to make the content more compact or spread out.

Additionally, select each component within each tab to adjust its padding. Learn more about adding padding in Adobe Captivate.

Customize the widget's background, content inside each tab, or the card's appearance. 

In the Appearance section, you can customize the widget’s background by changing the border type, background color, and inner shadow.

Expand the Settings section to enable the toggle to automatically move to the next slide once all sections of the accordion widget have been visited at least once.

From the Accordion section, select the components inside a tab such as Image, Heading, Subheading, Body, and Card.

• Image: Select this to add an image inside the tab. You can add an image from assets or your system. Learn more on how to edit images in Captivate. 
• Heading: Select this to add a title for each tab. 
• Subheading: Select this for additional information on the content within the tab. 
• Body: Select this to add a text description of the content in the tab. 
• Card: Select this to add or remove the card around the text.  

Select Content under Appearance settings to change the background of the content area inside a tab.

Select Card under Appearance settings to customize the look and feel of the card.

To add an icon to the accordion, select the tab and enable it from the Components section.

Customize the icon’s appearance and direction in which the icon flips when selected. You can change the icon by replacing the SVG file from the system or assets. You can also enable users to click the icon bounding box. Learn more on how to work with SVGs in Captivate.

To enhance learner navigation, customize the accordion tab’s behaviors for the normal, hover, and visited states.  Select Show to view the states. Then select each state and change its appearance.

Customize the appearance of each state by adjusting its color, border, corner radius, and shadow to visually distinguish one state from another. States allow you to modify an object's behavior based on learner interactions. Learn more on how to use states in Adobe Captivate.

Furthermore, you can select individual objects and customize their appearance as well from the Visual properties panel.

• Select the image in the accordion tab and then choose an image or apply filters and other customizations.

•  Select any text inside the accordion and customize the font, apply presets, change color, and change other formatting options.

• Select the buttons to view other design options available or change the shape, text, or icon appearance of the button.