All .tabContent elements are siblings of .tabnav, regardless if they
there is another .tabnav in between.
Try the nextUntil plugin by John Resig:
$.fn.nextUntil = function(expr) {
var match = [];
// We need to figure out which elements to push onto the array
this.each(function(){
// Traverse through the sibling nodes
for( var i = this.nextSibling; i; i = i.nextSibling ) {
// Make sure that we're only dealing with elements
if ( i.nodeType != 1 ) continue;
// If we find a match then we need to stop
if ( jQuery.filter( expr, [i] ).r.length ) break;
// Otherwise, add it on to the stack
match.push( i );
}
});
return this.pushStack( match, arguments );
};
$(document).ready(function(){
$('ul.tabnav > li a').click(function() {
$(this).nextUntil('.tabnav').hide();
$('.tabContent').eq(index).slideToggle();
return false;
});
});
});
Also, you see you don't need to call each() to assing event handlers,
the click() function does that for you.
- ricardo
On Dec 16, 2:40 am, "Didik Wicaksono" <didik.wicaks...@gmail.com>
wrote:
> 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
