Handboek Annuleren

Add an accordion widget to an Adobe Captivate project

Zoeken
Captivate

Captivate

App openen
  1. Captivate User Guide
  2. Get to know Captivate
    1. What's new in Adobe Captivate
    2. Adobe Captivate System Requirements
    3. Download Adobe Captivate
    4. Frequently Asked Questions
  3. Adobe Captivate releases
    1. Adobe Captivate 13
      1. Adobe Captivate (13.0) release notes
    2. Adobe Captivate 12
      1. Adobe Captivate 12 summary
      2. Adobe Captivate (12.6 update) release notes
      3. Adobe Captivate (12.5 update) release notes
      4. Adobe Captivate (12.4 update) release notes
      5. Adobe Captivate (12.3 update) release notes
      6. Adobe Captivate (12.2 update) release notes
      7. Adobe Captivate (12.1 update) release notes
  4. Project setup
    1. Slide navigator
    2. Project dimensions
    3. Set preferences
      1. General preferences
      2. Generative AI preferences
      3. Project preferences
      4. Quizzing preferences
    4. Themes
    5.  Configure URL access for Adobe Captivate features
  5. Import from PowerPoint
    1. Import PowerPoint presentations into Captivate
    2. Work with text on imported slides
    3. Work with shapes on imported slides
    4. Add media to imported slides
    5. Add interactions and animations to imported slides
  6. Generative AI in Captivate
    1. Generative AI overview
    2. Generate text 
      1. Generate text overview
      2. Write effective prompts for text generation
      3. Generate text using quick prompts
      4. Generate text using custom prompts
      5. Provide feedback to improve text generation
    3. Generate images
      1. Generate image overview
      2. Generate images using prompts
      3. Choose image content type - Photo or Art
      4. Use reference images for Composition and Style
      5. Best practices for effective image generation
      6. Provide feedback to improve image generation
    4. Generate avatar
      1. Generate avatar overview
      2. Customize the avatar
      3. Create transcripts for avatar narration
      4. Generate avatar narration
      5. Provide feedback to improve avatar generation
    5. Generate transcripts
      1. Generate transcripts overview
      2. Generate transcripts for closed captions
      3. Best practices to use transcripts effectively
  7. Add and edit text
    1. Add text to a project
    2. Add Adobe fonts to a project
    3. Add quotes
  8. Add and edit images
    1. Add images to a project
    2. Edit the background image on a slide
    3. Add SVGs to a project
  9. Add and edit media
    1. Add videos to a project
    2. Add and edit audio
    3. Add audio for widget interactions
    4. Add closed captions
    5. Add web objects to a project
  10. Interactive components
    1. Add a button
    2. Add an input field
    3. Add a radio button group
    4. Add a dropdown
    5. Add a checkbox
    6. Variables in Adobe Captivate
  11. Create quizzes
    1. Add a Multiple-choice question
    2. Add a True or false question
    3. Add a Match the column question
    4. Add a Short answer question
    5. Add a Sequence question
    6. Add question pools and random question slides
    7. Import questions as CSV
  12. Add widgets
    1. Add a Card
    2. Add Tabs
    3. Add a Certificate
    4. Add a Carousel
    5. Add a Hotspot
    6. Add Drag-and-Drop
    7. Add a Timeline
    8. Add Click to Reveal
    9. Add an Accordion
  13. Interactions and animations
    1. Add interactions to a project
    2. Create interactive video with overlay
    3. Create a slide-level interaction
    4. Create an object-level interaction
    5. Add animations to a project
    6. States in Adobe Captivate
  14. Enhance your e-learning project
    1. Add padding to content blocks and components
    2. Add a header to a project
    3. Add a footer to a project
    4. Create a long scroll project
    5. Add a conversation slide
    6. Add characters to your Adobe Captivate project
    7. Assets in Captivate
  15. Simulation projects
    1. Simulation overview and setup
    2. Demo mode
    3. Training mode
    4. Assessment mode
    5. Full-motion recording
  16. Timeline and TOC
    1. Timeline panel in Adobe Captivate
    2. Table of Contents in Adobe Captivate
  17. Review and collaborate
    1. Share for review
    2. Create and manage reviews
    3. Add review comments and collaborate
    4. FAQs and Troubleshooting guide for sharing projects for review   
  18. Preview and publish
    1. Preview your project
    2. Publish your project
  19. Accessibility
    1. Create accessible eLearning content in Adobe Captivate
    2. Make a slide accessible
    3. Make slide objects accessible
    4. Make an interactive component accessible
    5. Make a widget accessible
    6. Make a quiz accessible
    7. TOC and Playbar accessibility
  20. Design options in Adobe Captivate
    1. What are design options?
    2. Parts of a design option
    3. Create custom design options
    4. Modify a custom design option
    5. Export a custom design option
    6. Import a custom design option
  21. Additional resources
    1. Top How-tos in Captivate
    2. Captivate Classic vs Adobe Captivate
    3. Upgrade older Captivate projects to the latest version
    4. Create and deploy Captivate packages in Admin Console

Learn how to add an accordion widget that lets learners interact with content by clicking sections to reveal additional information

What is an accordion?

An accordion is a collapsible interface that organizes content into sections or tabs. Learners can click to expand a tab, revealing information while keeping other tabs hidden for a more focused and uncluttered view.

Add an accordion

Select Add new widget, and then select Accordion.

Adobe Captivate interface showing the Add new widget menu with Accordion option highlighted
The Accordion widget option in Adobe Captivate allows users to create collapsible content sections for more organized and interactive learning experiences.

Customize the accordion widget

An accordion includes a title, body, subtitle, and navigation buttons. Furthermore, you can select the components within each tab as well, such as image, heading, subheading, body, and card. You can also customize the widget's background with a solid color or an image, and add borders and shadows.

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

    Interface showing the number of accordions setting with a maximum of 20 accordions available in the Components section of Visual Properties.
    Interface showing the number of accordions setting with a maximum of 20 accordions available in the Components section of Visual Properties.

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

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

    Alignment and Spacing panel showing Content width and Content spacing sliders for adjusting accordion layout
    Adjust the horizontal alignment and spacing between accordion elements using these sliders to create a more compact or expanded layout.

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

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

    Appearance settings panel showing background customization options for accordion widget with border type, color, and inner shadow controls
    Customize the accordion widget's background appearance by adjusting border type, background color, and inner shadow settings.

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

    Settings toggle to enable automatic progression to the next slide after all accordion sections have been visited.
    Enable automatic navigation to the next slide after learners have viewed all accordion sections.

Customize each accordion tab

Each accordion tab in the widget has a title, an expandable/collapsible icon, images, headings, subheadings, body text, and a card. You can customize each object inside each tab by selecting it.   

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

    Components inside an accordion tab showing image, heading, subheading, body, and card options in the Visual Properties panel.
    The accordion tab structure displays five customizable components that can be enabled or disabled based on content requirements.

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

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

    Appearance settings panel showing Content option selected to customize the background of accordion tab content area.
    Customize the content background color, border, and shadow effects to visually distinguish the accordion tab content area.

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

    Card settings panel showing background color, border, and shadow options for customizing accordion content appearance.
    Visual Properties panel with appearance settings for customizing card elements within accordion tabs, including background color, border style, and shadow effects.

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

    Expand/collapse icon for accordion widget in Adobe Captivate
    Customizable accordion icon that indicates expandable content sections for learners.

    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.

    Dialog box showing options to replace an accordion icon with an SVG file from system or assets, with checkbox to enable icon bounding box clicks.
    Replace the accordion icon by selecting a new SVG file from your system or assets library, with option to make the icon's bounding box clickable.

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

    Interface showing normal, hover, and visited state options for accordion tabs with customization controls for appearance
    Customize each accordion state's appearance by adjusting color, border, corner radius, and shadow to provide visual feedback for learner interactions.

    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.

  6. 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.
    Visual Properties panel showing the image selection interface within an accordion tab, with options to customize images
    Select the image in an accordion tab to access customization options including filters and other visual adjustments.

    •  Select any text inside the accordion and customize the font, apply presets, change color, and change other formatting options.
    Text formatting options panel showing font dropdown, presets, and color settings for customizing accordion text
    Customize text properties including font family, size, formatting presets, and color to enhance accordion content readability.

    • Select the buttons to view other design options available or change the shape, text, or icon appearance of the button.
    Visual Properties panel showing button customization options for accordion widget with design options dropdown expanded
    Customize button appearance by selecting shape, text style, and icon options through the Visual Properties panel.

Add audio to each tab

Enhance the widget's engagement by adding audio cues when learners select a tab. The Accordion widget supports an Expand trigger that plays media for each tab interaction. Learn more about how to add audio to widget interactions.

Adobe, Inc.

Krijg sneller en gemakkelijker hulp

Nieuwe gebruiker?

Snelle koppelingen

Al je lidmaatschappen weergeven Je lidmaatschappen beheren
Snelle koppelingen weergeven
Snelle koppelingen verbergen

Legal Notices    |    Online Privacy Policy