Solved

JQuery Tabs - How to hide a tab

Posted on 2013-06-18
5
532 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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…
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 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…

734 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