Add an accordion panel

Function: Add an accordion panel

This action allows you to dynamically add a new, collapsible section (panel) to an existing Accordion user interface element in your application. This is useful for creating flexible interfaces where content sections can be expanded or collapsed, and you need to add new sections based on user actions or data.

Input

• Accordion ui element: This is the specific Accordion component on your page where you want to add a new panel. You'll select this directly from your application's UI elements.
• Accordion panel code: A unique identifier (like a short name or ID) for the new panel. This code helps you refer to this specific panel later if you need to modify or remove it.
• Accordion panel name: The title or label that will be displayed on the new panel's header. This is what your users will see.
• Accordion panel icon: (Optional) You can specify the name of a Material Icon (e.g., "home", "settings", "info") to be displayed next to the panel's name. This adds a visual cue for your users. You can find available icons at [https://fonts.google.com/icons?icon.set=Material+Icons](https://fonts.google.com/icons?icon.set=Material+Icons\).

Execution Flow

Real-Life Examples

Here are some examples of how you might use the "Add an accordion panel" action in your application:

Example 1: Dynamically adding a "Notes" section to a customer's profile

Imagine you have a customer management application with an "Account Details" accordion. You want to allow users to add a new "Notes" panel whenever they need to record specific information about a customer.

• Inputs:
  • Accordion ui element: Customer Account Details Accordion
  • Accordion panel code: customer_notes_20231027 (You might generate this dynamically, e.g., with a date)
  • Accordion panel name: Customer Notes \(Oct 27, 2023\)
  • Accordion panel icon: note_add
• Result: A new collapsible panel titled "Customer Notes (Oct 27, 2023)" with a "note_add" icon appears within the "Customer Account Details Accordion", ready for new notes to be added.

Example 2: Expanding a product configuration page with optional features

Consider an e-commerce site where customers configure a product. Based on their initial selections, new optional features might become available, each requiring its own configuration panel.

• Inputs:
  • Accordion ui element: Product Configuration Accordion
  • Accordion panel code: advanced_graphics_options
  • Accordion panel name: Advanced Graphics Settings
  • Accordion panel icon: palette
• Result: A new panel labeled "Advanced Graphics Settings" with a "palette" icon is added to the "Product Configuration Accordion", allowing the user to configure these new options.

Example 3: Creating a step-by-step wizard where steps are added as completed

You're building an onboarding wizard. Instead of showing all steps at once, you want to add a new step's panel to an accordion only after the previous step is completed.

• Inputs:
  • Accordion ui element: Onboarding Progress Accordion
  • Accordion panel code: step_3_payment
  • Accordion panel name: Step 3: Payment Information
  • Accordion panel icon: (Left blank, as icons might not be needed for this design)
• Result: A new panel titled "Step 3: Payment Information" is added to the "Onboarding Progress Accordion", indicating the next step the user needs to complete.