5

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>  
            <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>
            <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>
            </div>                  
        </div>                      
    </div>
</div>
12

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.

TLDR

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

| improve this answer | |
  • 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 Feb 29 '16 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 Feb 29 '16 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 Feb 29 '16 at 10:17
  • What if you want all tabs to be open by default? – thdoan Nov 7 '16 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 Nov 7 '16 at 9:30
4

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}}' 

Solution

require([
    'jquery',
    'accordion'
], 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,
        });
    });                 
});
| improve this answer | |
  • 1
    Is there a reason why you have used .ready instead of the domReady! functionality? – Ben Crook Mar 7 '16 at 8:46
  • @BenCrook yes, After after page load i want to use this functionality on my acript. – Bhavik Jan 23 '17 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 Jan 23 '17 at 9:28
  • How to open Apply Discount code tab in cart page? – jafar pinjar Nov 14 '18 at 12:21
  • Can any help me with how to close all active tabs on outside side click? @BenCrook – Kazim Noorani Oct 1 '19 at 5:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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