I have some mui tabs coming dynamicaly , how can i activate the tabs from javascript

[mukuljp]

No description provided.

[amorey]

There's an undocumented feature which lets you activate tabs from JavaScript:

mui.tabs.activate(paneId);

[mukuljp]

yes ,I have checked that already, it lets you activate the tabs onebyone right, that too by passing pane id , if i have 20 sections , if each section has a tabbed content of which has say 3 tabs,
so to activate all those i have give 60 unique id's to individual identify panes and activate them using mui.tabs.activate.instead it would be great if i have a single function call that activates all tabs in those 20 sections , and set the first tab selected by default. does mui have this feature? thank you

[amorey]

I see... to activate the tab on page load you can use the mui-is-active CSS state:

<ul class="mui-tabs">
  <li class="mui-is-active"><a data-mui-toggle="tab" data-mui-controls="pane-default-1">Tab-1</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-2">Tab-2</a></li>
  <li><a data-mui-toggle="tab" data-mui-controls="pane-default-3">Tab-3</a></li>
</ul>
<div class="mui-tab-content">
  <div class="mui-tab-pane mui-is-active" id="pane-default-1">Pane-1</div>
  <div class="mui-tab-pane" id="pane-default-2">Pane-2</div>
  <div class="mui-tab-pane" id="pane-default-3">Pane-3</div>
</div>

There's a typo in the documentation which I'll fix ASAP.

[amorey]

@mukuljp Did the CSS class fix your problem?

[mukuljp]

@amorey , the html for the tabs is coming up via ajax, i gave a class to all tabs initialy (only to first tab).

<ul class="mui-tabs "  >
   <li ><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>
<div class="mui-tab-content">
   <div class="mui-tab-pane  first_mui_tab_set" id="bla-{{p.program_numeric_id}}-1">
      <div class="mui-panel">
      </div>
   </div>
   <div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-2">
      <div class="mui-panel">

      </div>
   </div>
   <div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-3">
      <div class="mui-panel">

      </div>
   </div>
</div> .

and in activateThisTab function i added the mui.tabs.activate(paneId);
and finally to set the first tab as selected, I called a jquery code after the html got finished rendering,

 jQuery(".first_mui_tab_set").each(function () {
                var id_pane = jQuery(this).attr("id");
                mui.tabs.activate(id_pane);
            });

Overall its a hack :)

i had to put unique ids and click handlers for every tab, it would have been easier if its done by class .

[amorey]

I see. That works but using the mui-is-active class is definitely easier. This should fix the problem:

<ul class="mui-tabs "  >
   <li class="mui-is-active"><a ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>

[mukuljp]

oh let me try that,

[amorey]

Ok, let me know if it works.

Just to clarify, you need to add the mui-is-active class to the tab and the pane:

<ul class="mui-tabs "  >
   <li ><a class="mui-is-active" ng-click="activateThisTab('bla-' + p.program_numeric_id + '-1', null)" data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-1">Next Steps</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-2', null)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-2">Details</a></li>
   <li><a  ng-click="activateThisTab('bla-' + p.program_numeric_id + '-3', p.offices)"  data-mui-toggle="tab" data-mui-controls="bla-{{p.program_numeric_id}}-3">Hours & Locations</a></li>
</ul>
<div class="mui-tab-content">
   <div class="mui-tab-pane mui-is-active first_mui_tab_set" id="bla-{{p.program_numeric_id}}-1">
      <div class="mui-panel">
      </div>
   </div>
   <div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-2">
      <div class="mui-panel">

      </div>
   </div>
   <div class="mui-tab-pane" id="bla-{{p.program_numeric_id}}-3">
      <div class="mui-panel">

      </div>
   </div>
</div>

[mukuljp]

yes that worked , but in the documentation I found it was wrong at first . anyway its showing correctly now in https://www.muicss.com/docs/v1/css-js/tabs
your work is good , its very easy to use , thank you @amorey

[amorey]

Great! I'm happy to hear it's working!