Home/ Questions/Q 123361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T04:16:28+00:00

I have created an interface using jQuery UI Tabs, however one of my requirements

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 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.

    • 0