Accordion widget

Overview

Magento accordion widget is an extension of the Magento Tabs widget.

Accordions are generally used to break content into multiple sections that can be swapped to save space.

The accordion widget source is lib/web/mage/accordion.js.

Initialize the accordion widget

Initialize accordion in JS components

Initialize accordion with data-* attributes specified

Generally the accordion widget is instantiated like following:

$("#element").accordion();

Where:

• #element is the selector of the element for accordion is initialized.
• #element has children with the following attributes specified:
  • data-role="title"
  • data-role="content"

Optionally, you can specify the following:

• If you want the trigger to be different from the title, add the data-role="content" attribute for the element
• To have the content updated using Ajax, add the data-ajax="true" attribute for the element containing the URL for request.

Accordions support arbitrary markup, but the following requirements should be kept:

1. Titles and contents are specified in the same order in DOM: first title, then contents.
2. The header, trigger and content are specified, either by adding the data-* attributes for the corresponding children elements or by specifying these elements with selectors as options.

Mark-up examples:

<div id="element">
    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 1</span>
        </div>
    </div>
    <div data-role="content">Content 1</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 2</span>
        </div>
    </div>
    <div data-role="content">Content 2</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <span>Title 3</span>
        </div>
    </div>
    <div data-role="content">Content 3</div>
</div>

<script>
    require([
        'jquery',
        'accordion'], function ($) {
        $("#element").accordion();
    });
</script>

Initialize accordion with option

You can specify the header, content, trigger as options when you initialize the widget. For example:

$("#element").accordion({
    header : "#title-1",
    content : "#content-1",
    trigger : "#trigger-1",
    ajaxUrlElement: "a"
 });

Initialize accordion in a template

The accordion widget can be initialized using the data-mage-init attribute or <script> element, as described in JavaScript initialization.

Options

Accordion options coincide with Magento Tabs options, plus the following custom ones:

• active
• multipleCollapsible
• openOnFocus

active

Defines which tab is active when the widget gets instantiated.

Type: Array, String

Default value: 0

Example of the accordion initialization with the active option specified:

$("#element").accordion({ active: "0 1"});
$("#element").accordion({ active: [0,1]});

multipleCollapsible

Defines if multiple panels can be expanded at the same time.

Type: Boolean

Default value: false

Example of the accordion initialization with the multipleCollapsible option specified:

$("#element").accordion({ multipleCollapsible: false});

Get or set the multipleCollapsible option, after initialization:

//getter
var multipleCollapsible = $("#element").accordion("option","multipleCollapsible");

//setter
$("#element").tabs("option","multipleCollapsible",false);

openOnFocus

For keyboard navigation defines if the accordion expands when the title gets in focus.

Type: Boolean

Default value: false

Methods

Accordion widget options and keyboard interaction mostly coincide with the Magento tabs widget methods.

The custom accordion methods are the following:

• activate()
• deactivate()

activate(index)

Activate a tab with the specified index.

Type: Number, Array.

If no index is passed, all panels are activated.

Code examples:

$( "#element" ).accordion( "activate" );
$( "#element" ).accordion( "activate", 1 );
$( "#element" ).accordion( "activate", [0,1]);

deactivate(index)

Deactivate a tab with the specified index.

Type: Number, Array.

If no index is passed, all panels are deactivated.

Code examples:

$( "#element" ).accordion( "deactivate" );
$( "#element" ).accordion( "deactivate", 1 );
$( "#element" ).accordion( "deactivate", [0,1]);