Question

Hi I got help and eventually I got jquery show/hide function that work well.
But I spend a whole day to do next step by make it work when there are several comment groups.

the code here

var toggle = false;
$(function() {
    $(document).on('click', 'a.comments', function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
});

<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>

There are 4 comment groups but because of the html DOMs are the same then they could not working independently while click each of them.

Can you please advise how to deal with this situation manage them show/hide independently without having assigned jquery script per comments group?

Answer 1

Working demo http://jsfiddle.net/ZXNWF/ or http://jsfiddle.net/X5ZUU/1/ or with text change: http://jsfiddle.net/Xam9q/

API: http://api.jquery.com/nextAll/

and then using nextAll always get the :first one to show.

rest feel free to play around with the demo, hope this help for the cause.

code

var toggle = false;
$(function() {

    $(document).on('click', 'a.comments', function(e) {
         $('.toggleComments').hide();
        var $this = $(this);
        $(this).nextAll('.toggleComments:first').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
});
​

or simple

var toggle = false;
$(function() {

    $(document).on('click', 'a.comments', function(e) {
        $('.toggleComments').hide();
        var $this = $(this);
         $('.comments').text('Show Comments');
            $this.text('Hide Comments');
        $(this).nextAll('.toggleComments:first').toggle(1000,function() {    
        });
        e.preventDefault();
    });
});
​