Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

How to uncollapse an entire link tree with JavaScript?

+0
−0

This data tree is comprised of clickable buttons and I want to expose all branches, in a single action, instead of clicking each vertical arrow button anew.

I have tried the following code which didn't work (it will only toggle and untoggle the first and second branches).

document.querySelectorAll(".CategoryTreeToggle").forEach((element)=>{
    window.setInterval(()=>{
        if (element.getAttribute('data-ct-state', 'collapsed') ) {
            element.click();
        }
    }, 1000);
});

How to uncollapse an entire link tree with JavaScript?

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

Hint (4 comments)

1 answer

+2
−0

You can use MutationObserver

Quick example, disconnect logic is not mandatory and could be improved:

const container = document.querySelector('.CategoryTreeResult');

let disconnectTimeout;

function getCollapsedToggles() {
    return container.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]');
}

function clickToggle(toggle) {
    toggle.click();
}

const observer = new MutationObserver((mutationRecords, observer) => {
    getCollapsedToggles().forEach(clickToggle);

    clearTimeout(disconnectTimeout);
    disconnectTimeout = setTimeout(() => {
        if (getCollapsedToggles().length === 0) {
            observer.disconnect();
        }
    }, 1000);
})

const toggles = getCollapsedToggles();

if (toggles.length > 0) {
    observer.observe(container, {
        childList: true,
        subtree: true
    });
    toggles.forEach(clickToggle);
}
Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

I have upvoted because it worked for me in MediaWiki community website (built with the MediaWiki cont... (2 comments)

Sign up to answer this question »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!

Like what we're doing? Support us! Donate