Question

I am using some jQuery to toggle the visibility of some div’s. The toggle occurs on click and should only affect one div. The problem is that if there are multiple divs, they are all toggled on/off instead of just the one a user is trying to toggle. I think I need to use the ‘next’ function but can’t get it working. Here is my jQuery:

jQuery(function(){
 jQuery(".toggle").click(function(){
  jQuery(".hiddenText").slideToggle("fast");
        jQuery(this).html(function(i,html) {
            if (html.indexOf('More') != -1 ){
               html = html.replace('More','Less');
            } else {
               html = html.replace('Less','More');
            }
            return html;
        }).find('img').attr('src',function(i,src){
        return (src.indexOf('plus.gif') != -1)? '/minus.gif' :'/plus.gif';
    });
});
});

html:

<p class="toggleText">More Info &nbsp;<img src="/plus.gif"></p>
<div class="hiddenText">
blah blah
</div>

Any tips? Thanks!

Answer 1

For what it’s worth, you were right, you do have to use¹ next():

$(document).ready(
    function(){
        $('.toggleText').click(
            function(){
             $(this).next('.hiddenText').toggle();   
            }
            );
    }
    );

Demo at JS Fiddle.

---

As pointed out, by @Polyhedron, in the comments, next() would work, possibly better, without the selector, targetting the next sibling element of $(this).

Demo of the plain ol’ next(), at JS Fiddle.

---

1. Well, you don’t have to, but you can.