jQueryUI Tabs: I just need it to show or hide divs! Why is it so hard?

Question

I love jQueryUI, but the Tabs widget seems to be complicating things too much (jQueryUI version 1.10.3).

I know it can load content on the fly and this is all wonderful, but I have here a very simple structure with a form and some DataTables, more or less like this:

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form">
    <form>...</form>
  </div>
  <div id="SubTable1">
    DataTables 1 goes here
  </div>
  <div id="SubTable2">
    DataTables 2 goes here
  </div>
</div>

However, things break horribly when I apply jQueryUI Tabs to this. One reason I already know is the use of <base> tag in my code, which makes Tabs "think" I want to load my content on the fly, instead of simply hiding/showing content already there. But even using a hack to fix this, DataTables doesn't render correctly.

And frankly, I don't want to spend days trying to figure it all out to find a fix.

Instead, I would like to know if there is a way to "switch off" all the fanciness of JqueryUI Tabs, and make it just hide and show my tabs, using whatever is inside each div. Is it possible?

That would solve my problem. If I manually create some buttons and associate a click event that simply do a display: none / display: block to my divs, they work like a charm, including DataTables.

In fact, I'm considering dumping jQueryUI Tabs completely and creating the necessary code to do just that, but I would prefer to use jQueryUI Tabs, if possible.

Thanks a lot in advance!

Answer 1

I will admit this is a bit ham-fisted - but it works, as an example.

HTML:

<div id="MyContent">
  <ul>
    <li><a href="#Form">Main Data</a></li>
    <li><a href="#SubTable1">Additional data 1</a></li>
    <li><a href="#SubTable2">Additional data 2</a></li>
  </ul>
  <div id="Form" class="tab active">
    <form>My Form</form>
  </div>
  <div id="SubTable1" class="tab">
    DataTables 1 goes here
  </div>
  <div id="SubTable2" class="tab">
    DataTables 2 goes here
  </div>
</div>

CSS:

.tab{display:none}
.active{display:block}

jQuery:

$('#MyContent a').on('click',function(e){
    var id = $(this).attr('href')
    $('div.active').toggleClass('active');
    $(id).toggleClass('active', ($(this).attr('class') != 'active'));
    console.log()
})

Working jsFiddle