mdu-toggle-comment.js

const comments = document.querySelectorAll(".comment");

comments.forEach(function(element, index) {
  const toggleButton = document.createElement("div");
  const commentMeta = element.querySelector(".comment-meta");
  const currentComment = element.querySelector(".comment-content");
  const commentAuthor = element.querySelector(".comment-author");
  const commentMetadata = element.querySelector(".comment-metadata");
  const commentReply = element.querySelector(".reply");
  const childComments = element.querySelector(".children");

  commentMeta.append(toggleButton);
  commentMeta.style.position = "relative";
  toggleButton.innerHTML = "[-]";
  toggleButton.style.cssText =
    "position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer;";

  toggleButton.addEventListener("click", function(event) {
    if (currentComment.style.display === "none") {
      toggleButton.innerHTML = "[-]";
      currentComment.style.display = "block";
      commentReply.style.display = "block";
      commentMeta.style.marginBottom = "1em";
      commentAuthor.style.opacity = "1";
      commentMetadata.style.opacity = "1";
    } else {
      toggleButton.innerHTML = "[+]";
      currentComment.style.display = "none";
      commentReply.style.display = "none";
      commentMeta.style.marginBottom = "-20px";
      commentAuthor.style.opacity = "0.3";
      commentMetadata.style.opacity = "0.3";
    }

    if (childComments) {
      if (childComments.style.display === "none") {
        childComments.style.display = "block";
      } else {
        childComments.style.display = "none";
      }
    }
  });
});