soum
soum

Reputation: 1159

show content on click on each item

I have a list and i want to show content when i click on each item and hide the previous one. The only restriction is i have to use jquery 1.4.2

<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<div>
<div class="content">1.1</div>
<div class="content">1.2</div>
<div class="content">1.3</div>
</div>

--script--
$('.content').hide();
$('#list li').live('click', function(){
    $('.content').eq($(this).index()).show();
});

Upvotes: 1

Views: 969

Answers (2)

wirey00
wirey00

Reputation: 33661

You are missing the hiding siblings part and using the wrong selector type for your ul

$('.content').hide();
$('.list li').live('click', function(){
    $('.content').eq($(this).index()).show().siblings().hide(); // <-- here
});

http://jsfiddle.net/zcgYw

for jQuery 1.3.2 you have to change the way you're using index

$('.content').hide();
$('.list li').live('click', function(){
    var ind = $('li').index(this); // <-- this is how you have to use it
    $('.content').eq(ind).show().siblings().hide(); // <-- here
});​

http://jsfiddle.net/vvrqK/

according to the jQuery docs, the other .index() and .index('selector') were not added until jQuery 1.4

Upvotes: 1

hunter
hunter

Reputation: 63522

probably a typo on your part

$('#list li') should be $('.list li')

$('.list li').live('click', function(){
    $('.content').hide().eq($(this).index()).show();
});​

http://jsfiddle.net/vjAmQ/2/

Upvotes: 1

Related Questions