Solved

JQuery Tabs - How to hide a tab

Posted on 2013-06-18
5
514 Views
Last Modified: 2013-06-18
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.
0
Comment
Question by:dyarosh
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39256348
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

0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 39256379
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

0
 

Author Comment

by:dyarosh
ID: 39256400
What is the purpose of the Hide option on the JQuery Tabs Widget?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39256405
Yes jquery hide() function is for hide. But you are talking about the user and privileges. Just feel in your case it's for effect to user interface. Again if you are sure and you want to hide only the first and last tabs just add this css :

#tabs ul li:first-child, #tabs ul li:last-child{
	display:none;	
}

Open in new window

Page example here:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#tabs ul li:first-child, #tabs ul li:last-child{
	display:none;	
}
</style>
</head>

<body>
    <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>
                                  
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:dyarosh
ID: 39256656
Thanks.  I ended up doing as you suggested instead of using the JQuery option.
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now