CODEWITHSUNDEEP
jquery
Dhamu
Dhamu

Reputation: 1752

jquery hide show using index

I have multiple links to show related contents in same page show i used this,

$("#option .link").click(function(){
    Options=$("#option .link").index(this);
    $("#content").hide();
    $("#content:eq("+Options+")").show();
})

but this not working

Upvotes: 0

Views: 1762

Answers (3)

Dhamu
Dhamu

Reputation: 1752

You used #content id for element, but you should use only one id in one page, so you should change all #content id to class .content 

$("#option .link").click(function(){
   Options=$("#option .link").index(this);
   $(".content").hide();
   $(".content:eq("+Options+")").show();
});

make this changes and try...

Upvotes: -1

Edwin Alex
Edwin Alex

Reputation: 5108

Your idea is right.. But u should not use similar ID for more than one element.. Here, u used #content (it seems) for more than one element..

Try with class..

$("#option .link").click(function(){
    Options=$("#option .link").index(this);
    $(".content").hide();
    $(".content:eq("+Options+")").show();
})

Upvotes: 2

Jon
Jon

Reputation: 437474

There is only one element that can have id equal to content, because ids are unique. You probably need to switch to a class as you do with .link.

On another note, Index in your code is a global variable. Globals are to be avoided and there's really no need for one, so make it local with var Index.

Upvotes: 3

Related Questions