Jquery Challenge: Child to Parent to Child (brother? or sister?)

Hi I need help regarding this.

I have this code for example

<div class="item">
	<a href="#">Link 1</a>
	<div class="hidden">content here</div>
</div>

<div class="item">
	<a href="#">Link 2</a>
	<div class="hidden">content here</div>
</div>

<div class="item">
	<a href="#">Link 2</a>
	<div class="hidden">content here</div>
</div>

HTML:

Now, I want that when I click a link, the div class="hidden" will pop up.

My only concern is, how am I going to call the div class relative to my anchor text.

It's like calling the child which is a brother or sister?

 

The nextSibling object.

This is your CSS:

.hidden{
     display:none;
}

Code (markup):

Your Javascript:

function showContent(link){
    link.nextSibling.nextSibling.style.display='block';
}

Code (markup):

Your HTML for a link:

<a href="#" onclick="showContent(this)">Link 1</a>
<div class="hidden">Hidden Content</div>

Code (markup):

 

it works! thanks man!

i just need to convert it to jquery to make it more sophisticated

 

You mean less efficient?

 

$('a').click(function() {
$(this).next().show();
return false;
});

 

your code is not cross-browser compatible......