Toggle comment on Comick

toggle_comment_comick.js

// ==UserScript==
// @name         Toggle Comments Container on Comick
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  A very simple script to toggle Comments Container on Comick
// @author       Dadangdut33
// @match        *://*.comick.io/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=comick.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // CSS to style the comment section and button
    const css = `
        #comment-section .btn-container {
            display: block !important;
            margin-bottom: 10px;
        }
        #comment-section .toggle-comment-button {
            display: block;
        }
        #comment-section > div {
            display: none;
        }
        #comment-section > div.show {
            display: block;
        }
    `;

    // Create a style element and append it to the document head
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);

    // Function to toggle the visibility of the comment section
    function toggleCommentSection() {
        const commentSection = document.querySelector('#comment-section');
        if (commentSection) {
            const content = commentSection.querySelectorAll('div')[1]; // match second div
            if (content) {
                content.classList.toggle('show');
            }
        }
    }

    // Create and append the toggle button to the comment section
    function addToggleButton() {
      const commentSection = document.querySelector('#comment-section');
      if (commentSection) {
        // Create the button container div
        const btnContainer = document.createElement('div');
        btnContainer.className = 'btn-container';

        // Create the button element
        const button = document.createElement('button');
        button.textContent = 'Toggle Comment Section';
        button.className = 'toggle-comment-button';
        button.onclick = toggleCommentSection;

        // Append button to container
        btnContainer.appendChild(button);

        // Insert the button container at the beginning of the comment section
        commentSection.prepend(btnContainer);
      }
    }
    // Observe changes in the document to handle dynamic content loading
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                addToggleButton();
            }
        });
    });

    // Start observing the document for changes
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial button addition on page load
    window.addEventListener('load', addToggleButton);
})();