JQuery ui tabs using class selector

Question

In the jquery ui demo, in order to link to a certain tab, id selectors are used, which works fine in links since '#' stands for an anchor in a link.

However I want to create multiple tabpanels and link to the correct tabs using the class selector.

<div class="accordion">
    <h3>Product x</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href=".tabs-0">General product info</a></li>
            <li><a href=".tabs-1">End user info</a></li>
        </ul>
        <div class="tabs-0">
            general info for product x.
        </div>
        <div class="tabs-1">
            end user info product x.
        </div>
    </div>
</div>
<div class="accordion">
    <h3>Product y</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href=".tabs-0">General info</a></li>
            <li><a href=".tabs-1">End user info</a></li>
        </ul>
        <div class="tabs-0">
            general info for product y.
        </div>
        <div class="tabs-1">
            end user info product y.
        </div>
    </div>
</div>

Here is what I tried in jsfidlle and here is how each panel should look like!

So the question is how do I link to the tabs by class name?

Answer 1

<li><a href=".tabs-0">General product info</a></li>
<li><a href=".tabs-1">End user info</a></li>

The problem lies in the above code. You can't use class for hyper-linking the a tag. So change to id s.

Answer 2

Try this, You can use $(".tabs, .tab1") selectors. Every section need unique id so that it can able to show or hide that respective section, else it couldn't able to select!

    <div class="accordion">
        <h3>Product x</h3>
        <div class="tabs">
            <ul>
                <li><a href="#tabs-0">General product info</a></li>
                <li><a href="#tabs-1">End user info</a></li>
            </ul>
            <div id="tabs-0">
                general info for product x.
            </div>
            <div id="tabs-1">
                end user info product x.
            </div>
        </div>
    </div>

    <div class="accordion">
        <h3>Product y</h3>
        <div class="tab1" >
            <ul>            
                <li><a href="#tab1-0">General info</a></li>
                <li><a href="#tab1-1">End user info</a></li>
            </ul>
            <div id="tab1-0" >
                general info for product y.
            </div>
            <div id="tab1-1" >
                end user info product y.
            </div>
        </div>
    </div>

Script:

$(".tabs, .tab1").tabs();

Demo: http://jsfiddle.net/S74p8/4/

Answer 3

In the end I came up with this :

HTML:

<div class="accordion">
    <h3>Product x</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href="" class="tabpanellink">General product info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product x.
        </div>
        <div class="tabpanel">
            end user info product x.
        </div>
    </div>
</div>
<div class="accordion">
    <h3>Product y</h3>
    <div class="tabs">
        <ul>
            <!-- .tabs-0 & .tabs-1 don't work, since they are not a valid url -->
            <li><a href="" class="tabpanellink">General info</a></li>
            <li><a href="" class="tabpanellink">End user info</a></li>
        </ul>
        <div class="tabpanel">
            general info for product y.
        </div>
        <div class="tabpanel">
            end user info product y.
        </div>
    </div>
</div>

JQuery:

$(".tabpanellink").each(
    function(uniqueindex){
        $(this).attr('href', '#tab-' + uniqueindex);
    }
);
$(".tabpanel").each(
    function(uniqueindex){
        $(this).attr('id', 'tab-' + uniqueindex);
    }
);

$(".accordion").accordion({
    collapsible: true,
    active: false
});
$(".tabs").tabs();