Accordion Library:Features and Functionality with Examples

Last updated: 20 days ago

Category: Examples

The Accordion library can create nested collapsible panels and supports multiple data formats.

Using check

The check parameter enables checkbox and radio functionality for accordion panels.

Setting Initial check Values

To have certain branches checked during initialization, use the check.value parameter.

Setting Initial expand Values

Use the expand.value parameter to expand one or more branches during initialization. Set expand.only:false to expand multiple branches at the same level.

Expanding All

Set expand.all:true with expand.only:false to expand all parent nodes. With expand.only:true, only the first parent node at each level will expand.

Using Toolbox

Enable branch editing by setting tools:true to display the toolbox.

Tool Trigger Behavior

The branch toolbox is hidden by default and appears on hover. Use tools.trigger to change the display behavior.

Simple Tool Customization

The default toolbox contains four tools: add, remove, and edit. Use tools.children to customize the toolset.

Adding New Tools

The toolbox is created by the createTools function. The syntax for tools.children is the same as the first parameter of this function. Using the original method, you can:

• Modify the four basic tools
• Create entirely new tools

Initialization Disabling

There are three methods to implement disabling or similar disabled states:

Clickable Row

By default, the collapsible panel's row does not trigger any events when clicked. However, you can enable quick actions via the clickLine parameter.

Output Values

To enable value output functionality, configure the output parameters. The output.target parameter specifies the container element selector (using the same syntax as the first parameter of the getEl function).

Prerequisites:

• The check feature must be enabled (check: true orcheck.enabled: true)

Output Field

By default, values output the label field. Use output.prop to specify value or id instead.

Output Separator

Use output.separator to change the multi-value delimiter (default: comma ",").

Draggable Nodes

Enable node dragging and grafting with drag:true or drag.enable:true.

Using Hidden Fields

Set the name parameter to generate a hidden input field that automatically captures values.

Lazy Loading

Set deferred:true to load content and extra only when expanded, improving performance.