CODEWITHSUNDEEP
jquery
Adam
Adam

Reputation: 832

jQuery hiding/showing content

When the corresponding tab link is clicked I am trying to display its content below, the jquery below works but in this example: http://jsfiddle.net/jMQs9/

I need to show content from the two '.tab-content'

It only works for the first one and ignores the second, Im presuming the issue is because you cant have multiple id's, does anyone know what I need to fix this?

$(function () {

    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('#' + $(this).data('num')).show();
    });

});

Upvotes: 0

Views: 74

Answers (4)

Shanky
Shanky

Reputation: 361

---------------Javascript--------------

<script type="text/javascript">
$(function () {

    $('.tab-links li').each(function ()
    {
        $(this).click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('ul.tab-content').find('li#' + $(this).data('num')).show();
        });
    });

});

</script>

--------------Html------------

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li id="1">content for tab one</li>
    <li id="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li id="1">content for tab one #2</li>
    <li id="2">content for tab two #2</li>
</ul>

Upvotes: 0

i&#39;m PosSible
i&#39;m PosSible

Reputation: 1393

use class insted of id

see demo

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li class="1">content for tab one</li>
    <li class="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li class="1">content for tab one #2</li>
    <li class="2">content for tab two #2</li>
</ul>

js :

$(function () {

$('.tab-links li').click(function (e) {
    e.preventDefault();
    $('.tab-content > li').hide();
    $('.' + $(this).data('num')).show();
});

});

Upvotes: 1

Pierre Granger
Pierre Granger

Reputation: 2012

ID cannot start with a number and you're not supposed to have 2 elements with same ID in a page.

Try this instead : http://jsfiddle.net/jMQs9/1/

<ul class="tab-links">
    <li data-num="1"><a href="#">tab one</a>

    </li>
    <li data-num="2"><a href="#">tab two</a>

    </li>
</ul>
<ul class="tab-content">
    <li data-id="1">content for tab one</li>
    <li data-id="2">content for tab two</li>
</ul>

<ul class="tab-content">
    <li data-id="1">content for tab one #2</li>
    <li data-id="2">content for tab two #2</li>
</ul>

And JS

$(function () {

    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('ul.tab-content>li').hide();
        $('ul.tab-content>li[data-id="' + $(this).data('num')+'"]').show();
    });

});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Yes, you are right the problem is you have mutliple elements with the same ID, in that case when you use id-selector, it will return the first element with the said ID.

You can use a custom attribute, and attribute equals selector

<ul class="tab-content">
    <li data-id="1">content for tab one #2</li>
    <li data-id="2">content for tab two #2</li>
</ul>

then

jQuery(function ($) {
    $('.tab-links li').click(function (e) {
        e.preventDefault();
        $('.tab-content > li').hide();
        $('.tab-content li[data-id="' + $(this).data('num') + '"]').show();
    });
});

Demo: Fiddle

Upvotes: 0

Related Questions