Geek Answers Handbook

JQuery UI Tabs - Show All Tabs

Hello to all. I saw another entry about using a special jQuery UI tab to immediately open all the contents of a tab. This is more or less the "show all" tab. This does not seem to work for me. In any case, my page structure looks like this:

<div id="tabs"> <ul class="tabs-1"> <li><a href="#tabs-1"> Some Tab </li> <li><a href="#tabs-2"> Some Tab </li> <li><a href="#tabs-3"> Some Tab </li> <li><a href="#"> Show All </li> </ul> <fieldset id="tabs-1"> Content </fieldset> <fieldset id="tabs-2"> Content </fieldset> <fieldset id="tabs-3"> Content </fieldset> </div>

This is the JavaScript I used, based on the previous example:

 var user_tabs = $("#tabs").tabs({ select: function(event, ui) { if (ui.index == 3) { $("fieldset[id^=tabs-]").show(); } else { $("fieldset[id^=tabs-]").hide(); $(ui.panel).show() } } });

The bookmarks that I use are initialized correctly, but "show all tabs" does not work at all

Any ideas?

+4
source share
3 answers

First, fix the html code in your tabs. You are missing </a> for all the links.

Then change your last tab to:

 <li><a href="#tabs-4"> Show All </a></li>

add another panel (may be empty):

 <fieldset id="tabs-4"></fieldset>

And change your javascript to this:

 var user_tabs = $("#tabs").tabs({ show: function(event, ui) { if (ui.index == 3) { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } });

( Note the change from select to show )

Example: http://jsfiddle.net/niklasvh/km7Le/

+5
source

This works (for me) in jQuery-ui-1.10.0. Please note that I use divs, not fields, as done in the question.

 //Do the tabs $('#tabs').tabs({ activate: function (event, ui) { if (ui.newPanel.selector == "#tabs-4") { $("div[id^='tabs-']").attr('style', "display:block;"); $("div[id^='tabs-']").attr('aria-expanded', true); $("div[id^='tabs-']").attr('aria-hidden', false); } else { $("div[id^='tabs-']").attr('style', "display:none;"); $("div[id^='tabs-']").attr('aria-expanded', false); $("div[id^='tabs-']").attr('aria-hidden', true); $(ui.newPanel.selector).attr('style', "display:block;"); $(ui.newPanel.selector).attr('aria-expanded', true); $(ui.newPanel.selector).attr('aria-hidden', false); } } });
+4
source

In jQuery UI version 1.12, the event changed to "beforeActivate" and "ui" and returns newTab arguments

So, the new function will look like this:

 var user_tabs = $("#tabs").tabs({ beforeActivate: function(event, ui) { if (ui.newTab.find('a').attr('href') === '#tabs-4') { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } });
0
source

More articles:


All Articles