CODEWITHSUNDEEP
jquery-ui
TPR
TPR

Reputation: 2577

jquery-ui tabs - using more than once on same page

I am using jquery-ui to implement tabs.

However, I need to use it more than one on the same page.

but jquery uses the id "tabs" (as opposed to class or something), so it only works for the first instance.

Upvotes: 2

Views: 3244

Answers (5)

alejode
alejode

Reputation: 11

$(document).ready(function()
    $("#tabs1, #tabs2").tabs();
});

It works perfect! You can add the tabs you want.

$( "#tabs, #tabs1, #tabs2" ).tabs();

Thank you very much user3152277!

Upvotes: 0

user3152277
user3152277

Reputation: 1

$(document).ready(function()
    $("#tabs1, #tabs2").tabs();
});

Upvotes: 0

DIGITALUnderworld
DIGITALUnderworld

Reputation: 21

Another way is:

  $(document).ready(function() {
    $("#tabs1").tabs();
    $("#tabs2").tabs();

  });

Upvotes: 2

edgard
edgard

Reputation: 11

maybe not the best way, but I worked for two tabs

first tab

   $(function(){
     var options = {
 event:'mouseover',
 selected:0
     };
     $("#tabs").tabs(options);
   });

<div id="tabs">.....</div>

second tabs

$(function(){
     var options = {
 event:'mouseover',
 selected:0
     };
     $(".tabs").tabs(options);
   });
<div class="tabs">.....</div>

Upvotes: 1

alex
alex

Reputation: 490597

Could you change the tabs prefix?

$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });

Other than that, it seemed to work for me out of the box.

Upvotes: 3

Related Questions