Solved

JQuery Tabs - How to hide a tab

Posted on 2013-06-18
5
516 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

932 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

13 Experts available now in Live!

Get 1:1 Help Now