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

CORE PACK

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

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

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 AccordionItemSingle

Description: The oj-c-accordion-item-single component renders collapsible content in a group, supporting single expansion mode (only one item expanded at a time). Use itemKey and expandedKey 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-single
   item-key="item1"
   expanded-key="[[expanded]]"
   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-single>

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 CAccordionItemSingleElement<K extends string | number>

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

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

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-key :(K|null)

Specifies the expandedKey property. Use expandedKey to control which item is expanded. Bind this property to an observable in your ViewModel (e.g., ko.Observable<string | null>) to programmatically expand/collapse items.
Supports writeback:
  • true
Names
Item Name
Property expandedKey
Property change event expandedKeyChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-key-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 AccordionItemSingle. 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.AccordionItemSingle.AccordionItemSingleDetail<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.AccordionItemSingle.AccordionItemSingleDetail<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.

AccordionItemSingleDetail<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 K | undefined The key of the item that was previously expanded.
to K | null The key of the item that is now expanded.
Properties:
Name Type Argument
fromKey K <optional>
toKey K | null