?
Solved

JQuery Tabs - How to hide a tab

Posted on 2013-06-18
5
Medium Priority
?
567 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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…
Suggested Courses
Course of the Month15 days, 11 hours left to enroll

850 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