Comments toggle button open multiple comment sections

Comments toggle button open multiple comment sections

Hello all!

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