Hello, I'm new to jQuery and found this as my first problem that I can't
solve so far. I have a case of selecting an element to perform specific
event to each of them. For quick explanation please see this:
<ul class="tabnav">
<li><a href=#content1>Click to Show Content 1</a></li>
<li><a href=#content2>Click to Show Content 2</a></li>
<li><a href=#content3>Click to Show Content 3</a></li>
</ul>
<div id='content1' class='tabContent'>Content 1 Here</div>
<div id='content2' class='tabContent'>Content 2 Here</div>
<div id='content3' class='tabContent'>Content 3 Here</div>
<ul class="tabnav">
<li><a href=#content4>Click to Show Content 4</a></li>
<li><a href=#content5>Click to Show Content 5</a></li>
<li><a href=#content6>Click to Show Content 6</a></li>
</ul>
<div id='content4' class='tabContent'>Content 4 Here</div>
<div id='content5' class='tabContent'>Content 5 Here</div>
<div id='content6' class='tabContent'>Content 6 Here</div>
What I wanted to do is to make a Tab Contents out of it. For example: if I
press "Click to Show Content 1" I will have <div id='content1'> showing
while, <div id='content2'> and <div id='content3'> hiding, without affecting
the <div id='content4'>, <div id='content5'>, and <div id='content6'>
What I have tried is like this:
$(document).ready(function() {
$('ul.tabnav > li a').each(function(index) {
$(this).click(function() {
$('ul.tabnav ~ .tabContent').hide();
$('.tabContent').eq(index).slideToggle();
return false;
});
});
});
But still, the result affecting all the div.tabContent.
Any ideas? Thanks for reading.
Didik Wicaksono a.k.a firewalker06
