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; }); });
Comments
Post a Comment