Is this the best way to create an 'All' tab using jQuery tabs?

Question

I have created an interface using jQuery UI Tabs, however one of my requirements was to have an 'All' option that would display the contents of all the pages in the tab group at the same time down the page.

My tabs are being generated dynamically from PHP and I am giving each tab button an id so that the result looks like follows:

<li ><a id='tabProjectBrief' href="#section1">Project Brief</a></li>
<li ><a id='tabScorecard' href="#extra1">Scorecard</a></li>
<li ><a id='tabContributions' href="#section2">Contributions</a></li>
<li ><a id='tabOther' href="#section6">Other</a></li>
<li ><a id='tabAll' href="#all">All</a></li>

Then in my JavaScript I have the following:

$(document).ready(function() {
  $('#tabAll').click(function(){

    setTimeout("$('div.tabSection').removeClass('ui-tabs-hide')", 50);
  });
});

I am using setTimeout() because when a tab is selected, jQuery UI sets the ui-tab-hide class on the tab that was previously selected which from what I can tell occurs after the click event on the new tab. This way the tab that just received the ui-tabs-hide class will also have it removed.

It appears to work great, however it feels like a bit of a hack to me, so is there a better way to do this? Thanks.

Answer 1

Your solution seems fine to me. $("div.tab-section").show(); is cleaner but would keep the class names intact, which you don't want in case the user selects another tab after clicking the "All" tab.