Accordion Library: Data Sources with Examples

Last updated: 5 months ago

Category: Examples

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

Data Sources

There are three main types of data sources for the Accordion module:

1. Retrieve data from an existing one-dimensional array
2. Extract data from ol+li or ul+li tree node structures
3. Load data asynchronously from dynamic pages (e.g., from a database)

Array Data

Each item should include label and content properties.

    
        let data = [
            {label: 'Title 1', content: 'Content 1'},
            {label: 'Title 2', content: 'Content 2'},
            {label: 'Title 3', content: 'Content 3'},
        ]
    

The complete tree array structure may contain the following properties:

Node Data

The ol or ul structure should follow a specific format. A basic example:

                    
                    <ul>
                        <li>
                            <div class="_accordion-head">Title 1</div>
                            <div class="_accordion-cont">Content 1</div>
                        </li>
                        <li>
                            <div class="_accordion-head">Title 21</div>
                            <div class="_accordion-cont">Content 2</div>
                        </li>
                        <li>
                            <div class="_accordion-head">Title 3</div>
                            <div class="_accordion-cont">Content 3</div>
                        </li>
                    </ul>
                    
                

You can define the head section in three ways:

1. Use anonymous tags with attributes like content directly in them.

                    
                    <ul>
                        <li>
                            <li><div expanded disabled checked tips="" disk="" label="Title 1" value="title1" content="Content 1"></div>
                        </li>
                        <li>
                            <li><div label="Title 2" content="Content 3"></div>
                        </li>
                        <li>
                            <li><div label="Title 2" content="Content 3"></div>
                        </li>
                    </ul>
                    
                

2. Use anonymous tags and mark sub-elements using the rep attribute.

                    
                    <ul>
                        <li>
                            <div><i rep="icon"></i><i rep="label">Title 1</i></div>
                            <div class="_accordion-cont">Content 1</div>
                        </li>
                        <li>
                            <div>Title 2</div>
                            <div class="_accordion-cont">Content 2</div>
                        </li>
                        <li>
                            <div>Title 3</div>
                            <div class="_accordion-cont">Content 3</div>
                        </li>
                    </ul>
                    
                

3. Use anonymous tags with state attributes (expanded, checked, etc.), and use rep to mark sub-elements.

                    
                    <ul>
                        <li>
                            <div expanded disabled badge="2"><i rep="icon"></i><i rep="label">Title 1</i></div>
                            <div class="_accordion-cont">Content 1</div>
                        </li>
                        <li>
                            <div>Title 2</div>
                            <div class="_accordion-cont">Content 2</div>
                        </li>
                        <li>
                            <div>Title 3</div>
                            <div class="_accordion-cont">Content 3</div>
                        </li>
                    </ul>
                    
                

Basic Usage

Apply the oc-accordion attribute on any native element to initialize an accordion.

You can also create an instance using id + new.

Full Structure with Attributes

To satisfy SEO requirements, write properties on the first child node inside <li>. All branch properties are supported.

Full Structure with Child Nodes

Another method is using the rep attribute to identify content elements:

Custom Structure

The rep="custom" element is fully free-form. It won’t be styled or processed by the framework, giving full control to developers.

Using Simple Array Data

For simple array input, each object only needs label and content.

Using Detailed Array Data

When using new, you can pass objects with the following fields:

Using script to Pass Data

Instead of new + id, you can embed a <script type="content"> block inside the oc-accordion element.

You can also write the JSON data directly inside the element as plain HTML, but it’s less clean.

contType Parameter

If the content is a string, you need to set the contType parameter:

• If content = "#id", it refers to an HTML node; set contType = 'html'
• If content = 'http://...', it loads data asynchronously; set contType = 'async'

Other types (Function, Promise, Object, Array, HTMLElement) are auto-detected.

Using Async JSON Data

Use id + new, and set content to a JSON URL. Set contType = 'async'.

Using Async SQL Data

Use id + new, with content pointing to a PHP/Java endpoint that returns JSON data. Set contType = 'async'.

The database SQL file can be downloaded here.

Using Node as Content

Two ways to use DOM nodes as content:

content as Function

If content is a function, it should return a tree or flat array.

content as Promise

If content is a Promise, its resolved value should be a tree or flat array.

content as AsyncFunction

If content is an AsyncFunction, it should return a Promise that resolves to a tree or flat array.