Question

Trying to show/hide severals divs using jquery after each news on my page.

<div class="newsbox">
    <a href="#" class="item">Comments</a>
    <a href="#" class="item">Confirm</a>
</div>

Want each of these links to show a specific div with content connected to that news. Here are the divs that are hidden by default.

<div class="itemComments">
    CONTENT
</div>
<div class="itemConfirm">
    CONTENT
</div>

How could I write a JavaScript with JQuery that works regardless the number of news?

Thanks!

EDIT:
To prevent selecting all .itemComments on the page maybe I can select the next element with that classname starting from the element with the clickevent. Any ideas?

Answer 1

Try this :

$('div.newsbox a').click(function(){
   $('div.'+$(this).attr('class')+$(this).text()).show()
})

NEXT ONE :

$('div.newsbox a').click(function(){
   $('div.item'+$(this).text()).eq($(this).index()).show();
})