I am using accordion for tab open and close.
How to open default "content 2" tab?

<div class="block filter" id="layered-filter-block" data-mage-init='{"collapsible":{"openedState": "active", "collapsible": true, "active": true, "collateral": { "openedState": "filter-active", "element": "body" } }}'>                              
    <div class="block-content filter-content">                  
        <div class="filter-options" id="narrow-by-list" data-role="content" data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": true, "multipleCollapsible": true}}'>
            <div data-role="collapsible" class="filter-options-item" >
                <div data-role="title" class="filter-options-title">title 1</div>
                <div data-role="content" class="filter-options-content">content 1</div>
            <div data-role="collapsible" class="filter-options-item" >
                <div data-role="title" class="filter-options-title">title 2</div>
                <div data-role="content" class="filter-options-content">content 2</div>
            <div data-role="collapsible" class="filter-options-item" >
                <div data-role="title" class="filter-options-title">title 3</div>
                <div data-role="content" class="filter-options-content">content 3</div>

2 Answers 2


Magento 2 docs - Accordion

Set active to the tab you'd like to be open by default instead of true. For example:

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

So in your case it should be:

data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": "2", "multipleCollapsible": true}}'

Replacing 2 with the tab you require to be open.


Change "active": true, to "active": 1 where 1 is the tab you wish to be open by default.

  • Thank for giving solution. But All tabs are cumming Dynamically and how to set particular tab open by some condition. for eg. dynamically I require 2nd and 4th tab can be opened.
    – Bhavik
    Commented Feb 29, 2016 at 9:44
  • I'm not too sure if the built in Accordion has a way to do this, as a quick example I've done it with jQuery (using Require JS to load jQuery), this will open even tabs when a button is clicked. ``` <script type="text/javascript"> require([ 'jquery' ], function($) { $('.test').on('click', function(e) { e.preventDefault(); $('.filter-options-item:nth-child(even) .filter-options-content').toggle(); console.log('test'); }); }); </script> ``` I can't seem to format the above into code. What is your use case?
    – Ben Crook
    Commented Feb 29, 2016 at 10:05
  • If you mean having the 2nd and 4th tab open by default you can change active": "3" to active": [1,3] which will open the 2nd and 4th. But I'm not sure how to do that dynamically.
    – Ben Crook
    Commented Feb 29, 2016 at 10:17
  • What if you want all tabs to be open by default?
    – thdoan
    Commented Nov 7, 2016 at 2:42
  • @10basetom I'm not sure off the top of my head, I presume setting active: to either true or an array of your tabs to be opened such as [0, 1, 2, 3, 4]
    – Ben Crook
    Commented Nov 7, 2016 at 9:30

On page Load Dynamically require to open some particulate tab please use below code instade of

data-mage-init='{"accordion":{"openedState": "active", "collapsible": true, "active": [1,4], "multipleCollapsible": true}}' 


], function ($) {
    'use strict';

    jQuery( document ).ready(function() {                      
        jQuery( "#narrow-by-list" ).accordion({
            "openedState": "active",
            "collapsible": true,
            "active": [1,4], /** Integrat Dynamic open tab  */
            "multipleCollapsible": true,
  • 1
    Is there a reason why you have used .ready instead of the domReady! functionality?
    – Ben Crook
    Commented Mar 7, 2016 at 8:46
  • @BenCrook yes, After after page load i want to use this functionality on my acript.
    – Bhavik
    Commented Jan 23, 2017 at 4:40
  • 1
    It's best practice to use the domReady! functionality so your dependencies are aware of the document ready requirement. See stackoverflow.com/questions/15332628/… for more info
    – Ben Crook
    Commented Jan 23, 2017 at 9:28
  • How to open Apply Discount code tab in cart page? Commented Nov 14, 2018 at 12:21
  • Can any help me with how to close all active tabs on outside side click? @BenCrook Commented Oct 1, 2019 at 5:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.