Ask AI
Skip to main content

Add an accordion panel

Function: Add an accordion panel​

This action allows you to dynamically add a new section (panel) to an existing Accordion UI element on your page. This is useful for creating dynamic content or expanding options based on user interactions or data.

Input,

  • Accordion UI element: The specific Accordion component on your page where you want to add a new panel. (Required)
  • Accordion panel code: A unique identifier (text) for the new panel. This code is used internally to reference the panel. (Required)
  • Accordion panel name: The visible title (text) that will appear on the new panel's header. (Required)
  • Accordion panel icon: (Optional) The name of a Material Icon (e.g., "settings", "info") to display next to the panel's name. You can find available icons at [https://fonts.google.com/icons](https://fonts.google.com/icons\).

Output,

This action does not produce any direct output. Its effect is to modify the specified Accordion UI element on your page.

Execution Flow,

Real-Life Examples,

  • Example 1: Adding a "Contact Info" section to a User Profile.

    • Inputs:
      • Accordion UI element: User Profile Accordion
      • Accordion panel code: contact_info
      • Accordion panel name: Contact Information
      • Accordion panel icon: call
    • Result: A new panel titled "Contact Information" with a phone icon is added to the "User Profile Accordion" on the page.

  • Example 2: Dynamically adding a "Product Details" panel based on selection.

    • Inputs:
      • Accordion UI element: Product Display Accordion
      • Accordion panel code: product_details_123
      • Accordion panel name: Details for Product X
      • Accordion panel icon: (empty)
    • Result: A new panel titled "Details for Product X" is added to the "Product Display Accordion" without an icon.

  • Example 3: Creating a "Troubleshooting Steps" panel in a Help section.

    • Inputs:
      • Accordion UI element: Help Center FAQ
      • Accordion panel code: troubleshoot_login
      • Accordion panel name: Login Issues
      • Accordion panel icon: help
    • Result: A new panel titled "Login Issues" with a question mark icon is added to the "Help Center FAQ" accordion.