Prevent jQuery Tabs to bind to <ul> elements below the main <ul> element.

Posted by Shiki on Stack Overflow See other posts from Stack Overflow or by Shiki
Published on 2010-04-21T04:34:27Z Indexed on 2010/04/21 4:43 UTC
Read the original article Hit count: 180

Filed under:
|
|

Hi, I have this HTML:

<div id="mytabs">
  <ul id="main-tabs">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <li class="filter">
      <ul id="filter-controls">
        <li><a href="">Filter by something</a></li>
        <li><a href="">Filter by something</a></li>
        <li><a href="">Filter by something</a></li>
      </ul>
    </li>
  </ul>
</div>

And I set it to a tabbed control:

$('#mytabs').tabs();

My problem is jQuery UI also converts the <li> elements in <ul id="filter-controls"> into tabs. Is there a way to instruct jQuery UI to only set the <li> children of <ul id="main-tabs"> as the tabs?

Note: I am currently in no position to change <ul id="filter-controls"> into a non-ul element.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui