Disabling tabs

[cavidano]

Hi,

I would like you disable the actual tabs, but still leverage the core tab functionality. Such as Next, Previous, and active tab for example. I am building a form which needs validation so if nothing is selected (or incorrectly inputted) The user is restricted from advancing to the next tab. Here is the example:

http://unicef.milestone-creative.com/natcom-donor-toolkits/compare-countries.php

Thank you for your input.

Carl

[JangoSteve]

I think your best bet would be to just hide the tabs with display: none in your CSS. Then you can just use buttons to attach the public select method, and bind to the easytabs:before event hook and return false if you want to disallow advancing to the next tab.

[cavidano]

Steve,

Thank you for your speedy reply. I am not sure that's the approach I want to take. Visually I want the tabs there. Is there no way to simply disable the click state and rely on the public select method for the next previous buttons? These are great tabs by the way!

Thanks, Carl

[JangoSteve]

Oh, I thought you were saying you didn't want tabs. To disable their click events, just use plain jQuery:

$('.my-tabs').on('click', function(e) {
  return false;
});

[cavidano]

Thanks. I have tried everything to cancel these out, with no avail. Do you offer support (I will pay you) to set these up properly? This is a big project and has to be done correctly.

http://unicef.milestone-creative.com/natcom-donor-toolkits/compare-countries.php

Thanks again, Carl

[JangoSteve]

I could, but I honestly think we can do this right without official support ;-)

If the above doesn't work, how about this:

var tabs = $('#my-tabs-container');
tabs.easytabs();

// here's where the magic happens
tabs.on('easytabs:before', function(event) {
  var clicked = $(event.target);

  // test to see if the clicked element matches the selector for the tabs
  if (clicked.is('.my-tabs a')) {

    // if so, return false, since easytabs won't change tabs when
    // easytabs:before event returns false
    return false;
  }
});

[nicolasconnault]

JangoSteve, your solution doesn't work in my case because I'm using Previous/Next buttons within the tab container div, and your code disables them too. The event target picked up by the easytabs:before handler is always the whole container, regardless of the element that was clicked within it that called easytab().

[nicolasconnault]

My work-around was to add a transparent div over the tabs, with absolute positioning and a high z-index. A bit hacky, but works perfectly.