Element: <oj-c-accordion-item-multiple>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 20.0.0
Module:
  • accordion-item-multiple

Note: This component supersedes the following component: <oj-accordion>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Events

Methods

Type Definitions

Documentation-only Types

Other Topics


JET AccordionItemMultiple

Description: The oj-c-accordion-item-multiple component renders collapsible content in a group, supporting multiple expansion mode (multiple items can be expanded at once). Use itemKey and expandedKeys to control and identify expanded items. Event handlers onOjExpand and onOjCollapse provide callbacks for responding to expansion and collapse events.

This component is typically used in Layout & Nav scenarios, such as within templates for Table, ListView, or CardView. It supports accessibility via the aria-label attribute and requires header text for screen readers.


<oj-c-accordion-item-multiple
   item-key="item1"
   expanded-keys="[[expandedKeys]]"
   on-oj-expand="[[expandHandler]]"
   on-oj-collapse="[[collapseHandler]]"
   aria-label="Details for Item 1"
>
  <h3 slot="header">Item 1</h3>
  <div>Content for Item 1</div>
</oj-c-accordion-item-multiple>

Accessibility

Specify a value for the aria-label attribute with a meaningful description of the purpose of this accordion item for accessibility. Header text is required for screen readers.

Keyboard End User Information

  • Enter/Space: Toggle expansion/collapse of the item.
  • Tab: Move focus to the next tabbable element.

Touch End User Information

  • Tap on header: Toggle expansion/collapse of the item.

Validation and Messaging

This component does not support validation or messaging directly. Use parent form components for validation if needed.

User Assistance Text

Provide clear header text and aria-labels for accessibility and user guidance.


Usage

Signature:

interface CAccordionItemMultipleElement<K extends string | number>

Generic Parameters
ParameterDescription
KType extends string or number
Typescript Import Format
//To typecheck the element APIs, import as below.
import { CAccordionItemMultipleElement } from "oj-c/accordion-item-multiple";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/accordion-item-multiple";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

Default

The content node to be expanded or collapsed. Place any content to be shown/hidden inside this property.
Item's header. If not specified, the header contains only an open/close icon. The header text is required for accessibility purposes.

Attributes

disabled :boolean

Disables the item if set to true.
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-changed

expanded-keys* :Array<K>

Specifies the expandedKeys property. Use expandedKeys to control which items are expanded. Bind this property to an observable array in your ViewModel (e.g., ko.ObservableArray<string>) to programmatically expand/collapse items.
Supports writeback:
  • true
Names
Item Name
Property expandedKeys
Property change event expandedKeysChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-keys-changed

icon-position :"end"|"start"

Changes chevron icon placement at the end of the collapsible header.
Names
Item Name
Property iconPosition
Property change event iconPositionChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-icon-position-changed

item-key :K

Specifies the item key of each AccordionItemMultiple. Use itemKey to uniquely identify each item in the accordion.
Names
Item Name
Property itemKey
Property change event itemKeyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-item-key-changed

Events

ojCollapse

Note: The event detail contains the following properties: oj-c.AccordionItemMultiple.AccordionItemMultipleDetail<K>

Triggered after the item has been collapsed (after animation completes).

See Events and Listeners for additional information.

ojExpand

Note: The event detail contains the following properties: oj-c.AccordionItemMultiple.AccordionItemMultipleDetail<K>

Triggered after the item has been expanded (after animation completes).

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties object An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void

Type Definitions

Documentation-only Types

Note: Type definitions in this section have been provided for documentation purposes and cannot be imported into application code.

AccordionItemMultipleDetail<K extends string | number>

Payload for the onOjCollapse event and onOjExpand event.

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
from Array<K> | undefined The keys of the items that were previously expanded.
to Array<K> | null The keys of the items that are now expanded.
Properties:
Name Type Argument
fromKeys Array<K> <optional>
toKeys Array<K> | null