Comments toggle button open multiple comments

Question

I have this script for show/hide comments in the "main" page of my blog: albertosotophotography

<script type= "text/javascript">
    // Show/Hide Comments
    jQuery(document).ready(function() {

        // Get #comments div
        var uniqueAppend = 1;
        var tempName = 'comments';
        while(jQuery("#comments").length > 0 ){
            jQuery("#comments").attr('id',tempName + uniqueAppend++).addClass('commentContainer')
        }
        var commentsDiv = jQuery('.commentContainer');

        // Only do this work if that div isn't empty
        if (commentsDiv.length) {

        // Hide #comments div by default
        jQuery(commentsDiv).hide();

        // Append a link to show/hide
        jQuery('<a/>')
            .attr('class', 'toggle-comments')
            .attr('href', '#')
            .html('Notes')
            .insertAfter(commentsDiv);

        // Encase button in .toggle-comments-container div
        jQuery('.toggle-comments').wrap(jQuery('<div/>', {
            class: 'toggle-comments-container'
        }))     

        // When show/hide is clicked
      jQuery('.toggle-comments').on('click', function(e) {
            e.preventDefault();


        // Show/hide the div using jQuery's toggle()

        var commentContainer = jQuery(this).parent('.toggle-comments-container').siblings('.commentContainer');

        jQuery(commentContainer).fadeToggle('slow', function() {

            // change the text of the anchor
            var anchor = jQuery(commentContainer).siblings('.toggle-comments-container').children('.toggle-comments');
    var anchorText = anchor.text() == 'Notes' ? 'Hide' : 'Notes';
            jQuery(anchor).html(anchorText);

        });
        });

        } // End of commentsDiv.length

    }); // End of Show/Hide Comments
    </script>

The problem is when i press the button open all posts comments at the same time. I want open only the comments of the button that i press. I would be very grateful if someone can help me. Thanks and best regards.

Alberto

Answer 1

Changing the selectors in the following lines will fix your issue-

Problem

var commentContainer = jQuery(this).parent('.toggle-comments-container').siblings('.commentContainer');
var anchor = jQuery(commentContainer).siblings('.toggle-comments-container').children('.toggle-comments');

Solution

var commentContainer = jQuery(this).parent().prev();
var anchor = jQuery(commentContainer).next().children('.toggle-comments');

The problem is with the use of .siblings() which matches all elements with the same class name and thus selects all your comment nodes.


Also using slideToggle instead of fadeToggle might give you a better visual experience (This line is just a design suggestion. Not related to the answer)