How to get jQuery UI tabs element panels and set visibility on some of them?


Tags: javascript,jquery,css,jquery-ui,jquery-1.10

Problem :

How to get jQuery UI tabs tab elements panel numbers and set CSS style visibility on some of them?

I want to get elements' panel numbers for tabs and set visibility on some of the tabs.

<div id="tabs">
<ul>
<li><a href="#">1</a>
:
<li><a href="#">10</>
</ul>
<div id="tab-contents">
<div id="tab1">some content</div>
:
<div id="tab1">some content</div>
</div>

Get elements panel number by eq() or something, then set style visibility = hidden; or visible; for some tab(s). I tried the following but it does not work for jQuery 1.10.2 and jQuery UI 1.10.3.

$(function() {
var panelNumber = $("#tabs").eq();
document.getElementById("div#tabs ul li").visibility = 'hidden';
alert(panelNumber);
)};

I want to set specified tabs visible and rest of them hidden for the page navigation. Also, I do not want DOM to create or destroy tabs on tabs for navigation, using CSS visibility is needed for the minimized process time, because it gets slower.

Please answer the question for the jQuery 1.10.2 and jQuery UI 1.10.3 because they deprecated length and many others for jQuery UI 1.9.* update.



Solution :

You could use .slice() like so:

Working Example 1

 $(function () {
     $("#tabs").tabs();
     $('#tabs li').slice(2, 5).css('visibility', 'hidden');
 });

or :nth-child() like so:

Working Example 2

 $(function () {
     $("#tabs").tabs();
     $('#tabs li:nth-child(even)').css('visibility', 'hidden'); //note: even can be replaced with odd, specific number, or 3n+1 etc...
 });

These are just a couple of quick examples obviously there are a lot of ways to traverse and select.


    CSS Howto..

    How to fix angular-strap css

    How can I align centered inline-block elements correctly?

    CSS how to change page content depending on page size (zoom) in responsive design

    How do I arrange this in CSS?

    Links fade in when hovered - how to get them to stay opaque when their target is visible?

    How to add text under every image?

    I would like to know how can i do tab spaces after a word so that the pattern that comes after that would be align with each other

    How can I apply jQuery .css style to descendant div [closed]

    how to horizontally center a div of 10000px (wider than full screen) in CSS?

    CSS style not showing on print preview

    How to properly use CSS borders to visualize a value chain?

    how to stretch an image in background css property

    How to add styling (CSS) to tags in Javascript/Jquery

    How do you ad stylesheets to JSDOM

    How to force li elements to scroll horizontally and should be able to accommodate all the li elements in only one single line using css

    how to achieve following using css ( digits input )

    How to activate a CSS property according to a variation in PHP code or URL direction?

    How can I make a rounded image with a label in it?

    How to make the background image responsive

    CSS triangle how to remove white space on the right

    how to bypass style in element that is automatically applied through class?

    How to make rails load multiple css files

    CSS - How to align content to middle using bootstrap?

    W3.CSS how to make container centered inside another container

    How to add style to android app

    How to get the bottom border to stretch fully across a page in CSS

    How to find an element using Watir by inline css styles

    How to fill a rectange from center html , css

    How to create vertically centered meeting borders on a div?

    How to make text to wrap image in editor