Collapse mobile Trending articles, Trending pages, Popular categories sections just like the rest of 'em!

FandomCollapsibleSections.user.js

// ==UserScript==
// @name         Fandom Collapsible Sections (Persistent + Fandom Chevron)
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Add collapse/uncollapse toggles to trending and popular sections on Fandom wikis with per-page persistence and proper chevrons
// @author       whelp
// @match        https://*.fandom.com/*
// @grant        none
// ==/UserScript==

(function () {
    "use strict";

    /**
     * Generate a unique key for a header on this page
     */
    function storageKey(header) {
        return (
            "fandomCollapse:" +
            location.pathname +
            "::" +
            (header.textContent.trim() || header.className)
        );
    }

    /**
     * Turns a heading + nextElementSibling into a collapsible block
     * with persistence in localStorage and fandom chevron
     * @param {HTMLElement} header - The heading (h2, h3, etc.)
     */
    function makeCollapsible(header) {
        if (!header || header.dataset.collapsible === "true") return;
        header.dataset.collapsible = "true";

        const content = header.nextElementSibling;
        if (!content) return;

        // Wrap heading text and add a fandom chevron-wrapper
        header.style.cursor = "pointer";
        header.style.display = "flex";
        header.style.justifyContent = "space-between";
        header.style.alignItems = "center";

        const chevronWrapper = document.createElement("div");
        chevronWrapper.className = "chevron-wrapper";
        chevronWrapper.setAttribute("aria-label", "Collapse");
        chevronWrapper.setAttribute("aria-expanded", "true");
        chevronWrapper.innerHTML = `
            <svg class="wds-icon wds-icon-small chevron">
                <use xlink:href="#wds-icons-menu-control-small"></use>
            </svg>
        `;
        header.appendChild(chevronWrapper);

        const key = storageKey(header);

        let expanded = true;
        if (localStorage.getItem(key) === "collapsed") {
            expanded = false;
        }

        function applyState() {
            if (expanded) {
                content.style.display = "";
                header.setAttribute("aria-expanded", "true");
                chevronWrapper.setAttribute("aria-label", "Collapse");
                chevronWrapper.setAttribute("aria-expanded", "true");
                chevronWrapper.style.transform = "rotate(180deg)";
            } else {
                content.style.display = "none";
                header.setAttribute("aria-expanded", "false");
                chevronWrapper.setAttribute("aria-label", "Expand");
                chevronWrapper.setAttribute("aria-expanded", "false");
                chevronWrapper.style.transform = "rotate(0deg)";
            }
        }

        function toggle() {
            expanded = !expanded;
            localStorage.setItem(key, expanded ? "expanded" : "collapsed");
            applyState();
        }

        header.addEventListener("click", toggle);
        header.setAttribute("aria-expanded", expanded ? "true" : "false");
        applyState();
    }

    function init() {
        // Main page: Trending + Popular
        document
            .querySelectorAll(
                ".mobile-main-page__trending-articles > h2, .mobile-main-page__popular-categories > h2"
            )
            .forEach(makeCollapsible);

        // Category page: Trending pages
        document
            .querySelectorAll(".category-trending-pages__header")
            .forEach(makeCollapsible);
    }

    // Run when DOM is ready
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
    } else {
        init();
    }
})();