Question

I’m using jQuery to hide/show content and it works, but not the way I want it to.
The hierarchy of my elements is as follows:

<div class="row">
    <div class="column">
        <a href="">Show/Hide</a>
    </div>
    <div class="column hide-id">blahblahblah</div>
</div>

Here’s the code:

$(document).ready(function(){   
    $('.hide-id').hide();
    $('.column > a').click(function() {
        $('.hide-id').slideToggle(500);
            return false;
        });
    });
});

The problem lies with:

$('.hide-id').slideToggle(500);

It works properly, but I have this “hide-id” class repeated several times, which means every time I click on “.column a”, every single div with “hide-id” shows instead of the individual one I’m clicking.

I tried variations of it like:

$(this).parent().next().slideToggle(500);
this = .column a + .parent() = .column + .next() = .column that contains .hide-id

But, when I change .slideToggle from .hide-id to something else that should work, the script responds like my selector is invalid, because it doesn’t respond at all.

Is there a way to make $('.hide-id').slideToggle(500); work or do I need to find an alternative? I already tried applying .each to it, but I either didn’t do it properly or it just doesn’t work.

Answer 1

In your code what are you doing is when you click the show/hide link you are toggling all the .hide-id class object so you can do this way: http://jsbin.com/obemoc/1/edit

$(document).ready(function(){   
   $('.hide-id').hide();
      $('.column > a').click(function() {
        $(this).parents('div.row').children('.hide-id').slideToggle(500);
        return false;
    });
});

here we are finding the desired children from the clicking links parent and toggling the slide function.