Element: <oj-accordion>

Oracle® JavaScript Extension Toolkit (JET)
18.0.0
G12199-01

Since:
  • 0.6.0
Module:
  • ojaccordion

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Accordion

Description: A JET Accordion contains one or more oj.ojCollapsible child elements. 


<oj-accordion>
  <oj-collapsible>
    <h3 slot="header">
      <img src="images/default.png"/>
      <span>Header 1</span>
    </h3>
    <p>Content 1.</p>
  </oj-collapsible>
  <oj-collapsible expanded="true">
    <h3 slot="header">Header 3</h3>
    <p>Content 3</p>
  </oj-collapsible>
</oj-accordion>

Accessibility

If a collapsible header contains non-textual content, the application must set the aria-label on the header slot."

Touch End User Information

Target Gesture Action
Collapsible header Tap Toggle disclosure state.

Keyboard End User Information

Target Key Action
Collapsible header Space or Enter Toggle disclosure state.
Collapsible header Tab Navigate to next collapsible header and if none then the next element on page.
Collapsible header Shift+Tab Navigate to previous collapsible header and if none then the previous element on page.
Collapsible header UpArrow or LeftArrow (RightArrow in RTL) Move focus to the previous collapsible header with wrap around.
Collapsible header DownArrow or RightArrow (LeftArrow in RTL) Move focus to the next collapsible header with wrap around.
Collapsible header Home Move focus to the first collapsible header.
Collapsible header End Move focus to the last collapsible header.

Disabled items can receive keyboard focus, but do not allow any other interaction.

Reading direction

In the unusual case that the directionality (LTR or RTL) changes post-init, the accordion must be refresh()ed.


Usage

Signature:

interface AccordionElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { AccordionElement } from "ojs/ojaccordion";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojaccordion";

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 <oj-accordion> element accepts one or more <oj-collapsible> elements as children.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Attributes

expanded :Array<string>|Array<number>|Array<{id?: string, index?: number}>|null

Array contains either string ids or numeric zero-based indices or objects containing string id and/or numeric index of the collapsibles that should be expanded.

Setter value: array of either string ids or numeric indices or objects containing either string id or numeric index or both. If the object contains both id and index, numeric index takes precedence.

Getter value: array of objects containing numeric index and string id, if available. If an expanded collapsible has a page author provided id, that id is returned.

Note: The default value of null means that accordion doesn't modify the expanded state of its child collapsibles. When the value is specified, it overrides the expanded state of its child collapsibles.

Type details
Setter TypeArray<string>|Array<number>|Array<{id?: string, index?: number}>|null
Getter TypeArray<{id?: string, index?: number}>|null
Default Value:
  • null
Supports writeback:
  • true
Names
Item Name
Property expanded
Property change event expandedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-expanded-changed
Example

set Or get expanded property:

let elem = document.getElementById('accordion') as ojAccordion;
//set expanded to an array of objects
elem.expanded = [{id: "c2"},{id: "c3"}];
//or
elem.set('expanded', [{id: "c2"},{id: "c3"}]);

//set expanded to an array of string
//elem.expanded = ["c1", "c2"]. Please note this wont compile. Use the format below
elem.set('expanded', ["c1", "c2"]);

//set expanded to an array of number
//elem.expanded = [2,3]. Please note this wont compile. Use the format below
elem.set('expanded', [2, 3]);

//get expanded property value
let expanded = elem.expanded; //This is guaranteed to be of the type Array<{id?: string, index?: number}>|null

//reset the value of expanded to its default,
elem.unset('expanded');

multiple :boolean

Allow multiple collapsibles to be open at the same time. Note: if multiple is true, the beforeCollapse/beforeExpand/collapse/expand events will not be fired by the accordion. They are however fired by the collapsibles.
Default Value:
  • false
Names
Item Name
Property multiple
Property change event multipleChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-multiple-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

Events

ojBeforeCollapse

Triggered immediately before any collapsible in the accordion is collapsed. Call event.preventDefault() in the event listener to veto the event, which prevents the content from collapsing. If multiple is true, the beforeCollapse event will not be fired by the accordion.
Properties:

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

Name Type Description
fromCollapsible Element The collapsible being collapsed.
toCollapsible Element The collapsible being expanded.

ojBeforeExpand

Triggered immediately before any collapsible in the accordion is expanded. Call event.preventDefault() in the event listener to veto the event, which prevents the content from expanding. If multiple is true, the beforeExpand event will not be fired by the accordion.
Properties:

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

Name Type Description
fromCollapsible Element The collapsible being collapsed.
toCollapsible Element The collapsible being expanded.

ojCollapse

Triggered after any collapsible in the accordion has been collapsed (after animation completes). The collapse can be cancelled by calling event.preventDefault(). If multiple is true, the collapse event will not be fired by the accordion.
Properties:

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

Name Type Description
fromCollapsible Element The collapsible being collapsed.
toCollapsible Element The collapsible being expanded.

ojExpand

Triggered after the accordion has been expanded (after animation completes). The expand can be cancelled by calling event.preventDefault(). If multiple is true, the expand event will not be fired by the accordion.
Properties:

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

Name Type Description
fromCollapsible Element The collapsible being collapsed.
toCollapsible Element The collapsible being expanded.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

refresh : {void}

Refreshes the visual state of the accordion.

This method does not accept any arguments.

Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
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.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");