Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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";
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.