How to use jquery toggle to display/hide post replies?

Question

I am wanting post replies to be hidden on page load, and then toggled on clicking link:

html:

<!-- the post div-->
<div class="post">
<!-- the post content -->
<div class="clicker">click me</div>
<!-- end of the post -->
</div>

<!--begin replies div -->

<div class="container">

<div class="reply">
text in here
</div>

<div class="reply">
text in here
</div>

<div class="reply">
text in here
</div>

</div>

<!--- end replies div -->

<!-- repeat again etc-->

css:

.container {
display: none;
}

jquery:

$(function() {
    $(".clicker").click(function() {
    $(this).closest('.container').toggle('blind'); 
    });
});

jsfiddle:

http://jsfiddle.net/rwone/grBkm/9/ (solved solution)

Answer 1

Your problem is with your usage of the .closest() function. It traverses up the DOM tree, starting at the selector element(s), looking for the first element that matches the selector. However, your .clicker <div> is the child of a sibling of your .container <div>, so you want to go up first to the .post <div>, and then across to .container.

You can achieve that by doing the following:

$(this).closest('.post').next('.container').toggle('blind');

Take a look at an updated demo.

Answer 2

Try this link..It shows a good example. http://papermashup.com/simple-jquery-showhide-div/

this should work.. use next() instead of closest()

$(this).next('.container').toggle('blind');