asked on

JQuery Tabs - How to hide a tab

I am using JQuery Tabs to display content on my page. I need the 1st and last tab to be hidden unless the user on the page has certain privileges. The problem I am having is I can't figure out the syntax for hiding the tabs. Here is the markup:

    <div id="tabs">
        <ul>
            <li><a href="#tabs-SelectEmployee">Select Employee</a></li>
            <li><a href="#tabs-EmployeeInformation">Employee Information</a></li>
            <li><a href="#tabs-IDS">IDs</a></li>
            <li><a href="#tabs-PhoneNumbers">Phone Numbers</a></li>
            <li><a href="#tabs-Schedule">Schedule</a></li>
            <li><a href="#tabs-Comments">Comments</a></li>
        </ul>
        <div id="tabs-SelectEmployee">
            content
        </div>
        <div id="tabs-EmployeeInformation">
            content
        </div>
        <div id="tabs-IDS">
            content
        </div>
        <div id="tabs-PhoneNumbers">
            content
       </div>
        <div id="tabs-Schedule">
            content
        </div>
        <div id="tabs-Comments">
            content
       </div>
    </div>

Open in new window

Here is the JQuery:

        $(function () {
             $("#tabs").tabs();
            $("#tabs").tabs({ disabled: [0, 7] });
            $("#tabs-Comments").hide();

        });

Open in new window

All of the tabs display, the first and last tabs are disabled but still display. I need to hide the first and last tab so they are not shown. I have spent over 2 hours trying to figure this out so any help would be greatly appreciated.

Jagadishwor Dulal

unless the user on the page has certain privileges.

I think you need to control using programming that will return you user privileges.
PHP example:

<ul>
            <?php if($authorized==true){?><li><a href="#tabs-SelectEmployee">Select Employee</a></li><?php } ?>
            <li><a href="#tabs-EmployeeInformation">Employee Information</a></li>
            <li><a href="#tabs-IDS">IDs</a></li>
            <li><a href="#tabs-PhoneNumbers">Phone Numbers</a></li>
            <li><a href="#tabs-Schedule">Schedule</a></li>
            <?php if($authorized==true){?><li><a href="#tabs-Comments">Comments</a></li><?php } ?>
        </ul>

Open in new window

WebDevEM

Hi,

I agree that it's better to not include the markup if it's not needed, rather than hiding it after it has been sent to the browser. Anyone who knows how to view the page source could still see the contents of the disabled tab even if they're not authorized.

If it isn't possible within the language, configuration, etc, you can still hide disabled tabs by adding some CSS like so:

.ui-tabs-disabled {
display: none; 
}

Open in new window

Depending on where your CSS is loaded in relation to other CSS files, you may need add "!important" so it doesn't get overridden.

.ui-tabs-disabled {
display: none !important;
}

Open in new window

dyarosh

ASKER

What is the purpose of the Hide option on the JQuery Tabs Widget?

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dyarosh

ASKER

Thanks. I ended up doing as you suggested instead of using the JQuery option.