Home›Docs›Data›Accordion Component

Accordion Component

Last updated: 10 days ago

Category: Data

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

The oc-accordion is a custom tree component in this framework. Simply apply the oc-accordion tag to container nodes with ul+li or ol+li structure.

Output
HTML

- Germany
  
  Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.
- United States
  
  The United States has the world's largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
- India
  
  As the world's largest democracy and most populous nation, India is rich in languages, religions, and traditions. Its economy is rapidly expanding, particularly in technology, space research, and pharmaceuticals. Home to both ancient monuments and a booming startup scene, India blends deep-rooted spirituality with modern ambition. Festivals like Diwali and Holi symbolize its vibrant cultural life.
```
                
                
            
```

Using Complete Tree Structure (Attributes)

You can use complete tree structures similar to the tree module.

Output
HTML

```
                
                
            
```

Component Attributes

The component's attributes are consistent with the built-in instance parameters, with three important notes:

All component attributes should be lowercase
Attribute values must be in string format
For attributes named with verb-object structure or composed of two words, use hyphens to separate:
- Module parameter contType becomes cont-type in component attributes
- Parameter b4Init becomes b4-init

For detailed module parameters, please click here.

Component Methods

In addition to the common component methods set and reset, you mainly use the methods of the built-in instance itself. Usage example: elem.ins.update({})

Component Events

Since this component contains a built-in module instance, it supports two types of events:

Common component events: set, reset, connected
Example: elem.on('connected',()=>{})
Events from the built-in instance itself (accessible via elem.ins)
Example: elem.ins.on('initiated',()=>{})

Accordion Library: Methods and Events with Examples

20 days ago

Accordion Component: Data Sources with Examples

14 days ago