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

Question

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.

Answer 1

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.

Answer 2

Here's one solution:

html:

<ul class="tablist">
  <li class="tab">a</li>
  <li class="tab">b</li>
  <li class="tab">c</li>
  <li class="tab">d</li>
  <li class="tab">e</li>
</ul>

javascript:

var tabs = $(document).find('.tablist .tab');
var tabsToToggle = { 0, 3, 4 }
for (var i=0;i<tabsToSet.length;i++)
{ 
   tabs.eq(i).toggle();
}

Tested with jQuery 1.10.1, 2.0.2, and 1.x edge on jsFiddle