Accordion widget


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 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 data-role="content">Content 1</div>

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

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

        'accordion'], function ($) {

Initialize accordion with option

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

    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.


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


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]});


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:

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



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

Type: Boolean

Default value: false


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

The custom accordion methods are the following:


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 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]);

Code sample

The following example shows how to initialize the accordion widget and pass options during the initialization.

<div id="accordion" data-mage-init='{
            "active": [1,2],
            "collapsible": true,
            "openedState": "active",
            "multipleCollapsible": true
    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 1</h4>
    <div data-role="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 2</h4>
    <div data-role="content"> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

    <div data-role="collapsible">
        <div data-role="trigger">
            <h4>Title 3</h4>
    <div data-role="content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>


The result is three sections with separate swapped content.

Accordion Widget