Show/Hide div below link

jquery

Solution

Use `this` to get the item that was clicked, and traverse the DOM from there to the element you want to act on.

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

You might be able to make it a little more resilient to html changes by going up to the parent div, then finding the 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 the content div will be a sibling, but not necessarily after the link:

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

Problem

I have a few links on a page all with the same class "expand-content-link" which are all directly above a div with some content in it , set to "display:none;" (with the same class "hidden-content"). I want to be able to click the link and only the div below the link toggles to visible. HTML ``` <div class="content-holder"> <a href="#" class="expand-content-link">Expand Content 1</a> <div class="hidden-content">Bunch of hidden content and 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 for 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 for div 3</div> </div> ``` Now my javascript is as follows, but it currently expands all content with the class "hidden-content" (for obvious reasons) and I can't figure out how to manipulate the code so it only displays the content that it 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/

Original source