jquery - Show/Hide div below link -

i have few links on page same class "expand-content-link" directly above div content in , set "display:none;" (with same class "hidden-content").

i want able click link , div below link toggles visible.

html

<div class="content-holder"> <a href="#" class="expand-content-link">expand content 1</a> <div class="hidden-content">bunch of hidden content , stuff here</div> </div>  <div class="content-holder"> <a href="#" class="expand-content-link">expand content 2</a> <div class="hidden-content">bunch of hidden content div 2</div> </div>  <div class="content-holder"> <a href="#" class="expand-content-link">expand content 3</a> <div class="hidden-content">bunch of hidden content div 3</div> </div> 

now javascript follows, expands content class "hidden-content" (for obvious reasons) , can't figure out how manipulate code displays content needs too.

javascript:

 <script>     jquery(document).ready(function() {          jquery(".expand-content-link").click(function() {             jquery(".content-holder").find(".hidden-content", this).toggle();             return false;            });     }); </script> 

jsfiddle demo: http://jsfiddle.net/psah9/

use this item clicked, , traverse dom there element want act on.

jquery(document).ready(function() {      jquery(".expand-content-link").click(function() {         jquery(this).next(".hidden-content").toggle();         return false;        }); }); 

you might able make little more resilient html changes going parent div, finding content div:

jquery(document).ready(function() {      jquery(".expand-content-link").click(function() {         jquery(this).closest('.content-holder').find(".hidden-content").toggle();         return false;        }); }); 

or assuming content div sibling, not after link:

jquery(document).ready(function() {      jquery(".expand-content-link").click(function() {         jquery(this).siblings(".hidden-content").toggle();         return false;        }); });