Collapsible Page List Block in sidebar

The page list block is a WordPress core block whose code is set up in a way that renders the pages as nested unordered lists ol. It is possible to define a new block, using code similar to the existing one, that does the same thing using details and summary tags which would make the page list collapsible.

One way that does not involve creating a new block would be to use CSS and JavaScript to simulate the effect of collapsing by setting event listeners on the list markers and hiding/showing the nested elements.

CSS:

li.wp-block-pages-list__item.has-child::marker {
    content: "▼";
}

li.collapsed.wp-block-pages-list__item.has-child::marker {
    content: "?";
}

li.collapsed.wp-block-pages-list__item.has-child.collapsed ul {
    display: none;
}

JavaScript:

const nodes = document.querySelectorAll("li.wp-block-pages-list__item.has-child")
for (let node of nodes) {
    node.addEventListener("click", (event) => {
        if (event.target.nodeName === "A" || event.target.nodeName === "UL") {
            // Do the default action, i.e. go to the linked page.
        } else {
            event.target.classList.toggle("collapsed");
            event.preventDefault();
            event.stopPropagation();
        }
    })
}

• This reply was modified 8 months, 1 week ago by dhruvkb. Reason: Updated triangles to be bigger
• This reply was modified 8 months, 1 week ago by dhruvkb. Reason: nodeName is uppercase

Thanks @dhruvkb to share it ??