Accordion library
Category: DataThe Accordion library 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
Add the oc-accordion attribute to any native HTML element to create a collapsible panel.
Since accordion panels are typically used to contain large content blocks (actual DOM elements), the simplest approach is to directly write the title and main content into the _accordion-head and _accordion-cont tags respectively. The module will not process the HTML content inside oc-accordion as data.
- Output
- HTML
-
-
GermanyGermany 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 StatesThe 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.
-
IndiaAs 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.
-
-
You can also create an instance using the id+new approach.
- Output
- HTML
- JS
-
-
GermanyGermany 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 StatesThe 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.
-
IndiaAs 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.
-
-
-
new orca.Accordion('#demo');
Basic Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| name | string | '' | Name attribute of hidden field |
| content | any | '' | Data source |
| contType | 'async'|'html'|'text'|'' | 'text' | Content type |
| contData | object | {} | Data sent with content request |
| ajax | object | {} | Async request parameters |
| passive | boolean | false | Whether fully disabled |
| disable | string|number|DOM|object|array | '' | Initially disabled items |
| readonly | string|number|DOM|object|array | '' | Initially readonly items |
| deferred | boolean | false | Defer child node rendering |
| delay | number | 100 | Event debounce delay (ms) |
Expand/Collapse Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| expand.value | string|number|DOM|object|array | '' | Initially expanded items |
| expand.all | boolean | false | Expand all items |
| expand.only | boolean | true | Expand only one item |
| expand.linkage | boolean | false | Link parent expansion |
| clickLine | 'checked'|'expanded'|'none' | 'none' | Branch line click behavior |
Interaction Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| arrow | boolean |object | {} | Configure indicator arrow |
| arrow.enable | boolean | true | Enable indicator arrow |
| arrow.show | string | '_icon-down' | Expanded state class name |
| arrow.hide | string | '_icon-down' | Collapsed state class name |
| arrow.anim | string | '_rotate180' | Animation class name |
| arrow.type | 'icon'|'image' | 'icon' | Arrow type |
| arrow.trigger | 'click'|'hover' | 'click' | Expansion trigger event |
| check | boolean | object | {} | Configure checkbox/radio |
| check.enable | boolean | false | Enable checkbox/radio |
| check.type | 'checkbox'|'radio'|'none' | 'checkbox' | Selection mode |
| check.value | string|number|DOM|object|array | '' | Initially selected items |
Tools Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| tools | boolean |object | {} | Configure editing tools |
| tools.enable | boolean | false | Show editing tools |
| tools.trigger | 'click'|'hover'|'none' | 'hover' | Tool display trigger mode |
| tools.children | array | ['add', 'edit', 'remove'] | Tool button types |
Appearance Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| lamp | boolean |object | {} | Configure indicator light |
| lamp.enable | boolean | false | Enable label indicator |
| lamp.placement | 'left'|'right'|'top'|'bottom' | 'bottom' | Indicator light position |
| duration | number | 0 | Animation duration (ms) |
| classes | string | '' | Additional CSS classes |
| layout | string | 'check(icon|disk|cube|label|tips)custom|tools|badge|arrow' | Header node layout |
| appear.rounded | boolean | true | Show rounded corners |
| appear.bordered | boolean | true | Show borders |
| appear.divided | boolean | true | Show dividers |
| appear.gapped | boolean | false | Show item spacing |
Data Output Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| output | boolean | object | {} | Configure output |
| output.enable | boolean | true | Enable data output |
| output.target | string | '' | Output target node |
| output.separator | string | ',' | Multi-value separator |
| output.prop | string | 'label' | Value property |
Drag Configuration
| Property | Type | Default | Description |
|---|---|---|---|
| drag | boolean |object | {} | Configure drag and drop |
| drag.enable | boolean | false | Enable drag and drop |
| drag.exclude | string | '' | Non-draggable node selector |
| drop.attr | string | 'dropnode' | Droppable node attribute |
| drop.global | boolean | false | Enable global drop |
Before Functions
| Property | Type | Default | Description |
|---|---|---|---|
| b4Expand | Function | null | Execute before expand |
| b4Collapse | Function | null | Execute before collapse |
| b4Add | Function | null | Execute before add |
| b4Edit | Function | null | Execute before edit |
| b4Remove | Function | null | Execute before remove |
| b4Graft | Function | null | Execute before drag |
Event Listeners
| Property | Type | Default | Description |
|---|---|---|---|
| onRendered | Function | null | Triggered after node tree creation |
| onTrigger | Function | null | Triggered after node trigger |
| onAdded | Function | null | Triggered after add |
| onEdited | Function | null | Triggered after edit |
| onRemoved | Function | null | Triggered after remove |
| onDisabled | Function | null | Triggered after disable |
| onEnabled | Function | null | Triggered after enable |
| onDisabledAll | Function | null | Triggered after disable all |
| onEnabledAll | Function | null | Triggered after enable all |
| onReadonly | Function | null | Triggered after set readonly |
| onReadonlyAll | Function | null | Triggered after set all readonly |
| onExpand | Function | null | Triggered on expand |
| onExpanded | Function | null | Triggered after expand |
| onCollapse | Function | null | Triggered on collapse |
| onCollapsed | Function | null | Triggered after collapse |
| onExpandAll | Function | null | Triggered on expand all |
| onExpandedAll | Function | null | Triggered after expand all |
| onCollapsedAll | Function | null | Triggered after collapse all |
| onSelected | Function | null | Triggered after select |
| onDeselected | Function | null | Triggered after deselect |
| onSelectedAll | Function | null | Triggered after select all |
| onChecked | Function | null | Triggered after check |
| onUnchecked | Function | null | Triggered after uncheck |
| onCheckedAll | Function | null | Triggered after check all |
| onFilled | Function | null | Triggered after brief fill |
| onTurned | Function | null | Triggered after page turn |
| onGot | Function | null | Triggered after get value |
| onSet | Function | null | Triggered after set value |
| onCleared | Function | null | Triggered after clear value |
| onGrafted | Function | null | Triggered after drag complete |
| onUpdatedCont | Function | null | Triggered after content update |
| onRequest | Function | null | Triggered after async request |
| onTooFew | Function | null | Triggered when selection too few |
| onTooMany | Function | null | Triggered when selection too many |
| onPassivated | Function | null | Triggered after global disable |
| onActivated | Function | null | Triggered after global enable |