Jqueryui accordion disable specific tab

Hi, I’m trying to make a master for the first time, I want to turn off all the tabs of the accordion when I click on the link that includes the next tab and open it. i hve this code, but it disables all tabs :( thanks

$(function() {
   $("#list1a").accordion({
    autoHeight: false,
    navigation: false
   });
});
$("#list1a").accordion("disable"); 
$("#list1a").accordion("activate", 2 ); 
+3
source share
3 answers

Do not use an accordion for this, it is not intended for magic. And since there is no wizard component in jQuery UI that allows us to make our own;)

HTML:

<ul class="ui-wizard">
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
   <li class="ui-wizard-panel">
      <h3 class="ui-wizard-header">panel 1</h3>
      <div class="ui-wizard-content">
          Panel content
          <span class="ui-wizard-next">Goto next</span>
      </div>
   </li>
</ul>

Javascript plugin:

$.fn.wizard = function(){
   this.find('.ui-wizard-content').hide();
   this.find('.ui-wizard-content:first').show();
   this.find('.ui-wizard-content:last .ui-wizard-next').hide(); // just in case
   this.delegate('.ui-wizard-next', 'click', function(){
      // very long jquery chain...
      $(this).closest('.ui-wizard-content')
             .hide('fast')
             .closest('.ui-wizard-panel')
             .next()
             .find('.ui-wizard-content')
             .show('fast');
   });
}

javascript impl:

$(".ui-wizard").wizard();

.. , / . .

+2

Try the class with the user disabled: http://api.jqueryui.com/theming/css-framework/ Consider this piece of code that allows the user to return, but not go to the following tab of the accordion:

function disableAccordionNextTabs () {
    var $accordion  = $(".accordion");
    var active      = $accordion.accordion('option', 'active');
    var $headers    = $accordion.find($accordion.accordion('option', 'header'));

    $headers.addClass('ui-state-disabled');
    for (var i = active; i >= 0; i--) {
        $headers.eq(i).removeClass('ui-state-disabled');
    }
}
0
source

Source: https://habr.com/ru/post/1758607/


All Articles