jQuery UI Tabs - Show all Tab

Question

Hey everyone. I saw another post on using a specific jQuery UI tab to open all tab content at once. This is more or less a "show all" tab. It doesn't seem to be working for me. In any event, 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 that I have used, based on a 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 tabs that I use have initialized correctly, but the "show all tab" doesn't work at all

Any ideas?

Answer 1

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

Then change your last tab to:

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

add another panel (can 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/

Answer 2

This works (for me) in jQuery-ui-1.10.0. Note that I use divs, not fieldsets 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);
        }
    }
});

Answer 3

In version jQuery UI 1.12 event changed to 'beforeActivate' and 'ui' and returns arguments newTab

So new function will look like:

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');
        } 
    }
});

Answer 4

In JQuery UI Tabs 1.12.1, this works perfectly:

var user_tabs = $("#tabs").tabs(
    {activate: 
        function(event, ui) {
            if ( ui.newTab.find('a').attr('href') === '#tabs-4') {
                $("div[id^='tabs-']").show();
            }
        }
    }
)