Home›Examples›Accordion Component: Data Sources with Examples

Accordion Component: Data Sources with Examples

Last updated: 14 days ago

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

Accordion Component: Data Sources with Examples14 days agoAccordion Component10 days agoAccordion Library: Methods and Events with Examples20 days agoAccordion Library:Features and Functionality with Examples20 days agoAccordion Library: Data Sources with Examples20 days agoAccordion Library: Content Parameter with Examples20 days agoAccordion Library: Styling with Examples20 days agoAccordion library21 days ago

Basic Usage

Apply the oc-accordion tag to container nodes with ul+li or ol+li structure to quickly create a collapsible panel.

Using Complete Tree Structure (Attributes)

You can use a complete tree structure similar to the tree module.

Using Complete Tree Structure (Child Nodes)

Another way to define a complete tree structure is to specify element nodes using the rep attribute. Available attributes include:

Custom Structure

For tree menus, the fully customizable element is rep=custom. This element is not affected by the framework's css styles or js scripts, allowing for complete freedom in implementation.

Using Tree Array Data

Use a script tag with type="content" attribute as the first child node of the target element, containing the data in array format.

You can also write the data directly in HTML format within the target element without using a script tag.

Using Asynchronous JSON Data

Use the content attribute to request a JSON file, while also setting the cont-type attribute to async.

Using Asynchronous SQL Data

Use the content attribute to request a dynamic page that may retrieve data from SQL and return it to the frontend. In this case, you also need to set the cont-type attribute to async.

The database SQL file can be downloaded here.