Reputation: 1159
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
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
});
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
});
according to the jQuery docs, the other .index()
and .index('selector')
were not added until jQuery 1.4
Upvotes: 1
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();
});
Upvotes: 1