How to toggle all associated buttons with JavaScript (how to totally uncollapse a collapsed data tree in JavaScript)?

[bendqh1]

In a webpage there are three clickable elements, all sharing the same class (.CategoryTreeToggle).
Clicking on button A shows button B and clicking on button B shows button C.

An HTML example would be any MediaWiki category tree with three or more branches, such as here.

I wish to show all buttons in one action.

document.querySelectorAll('.CategoryTreeToggle').forEach( (element)=>{
    window.setInterval( ()=>{
        element.click();
    }, 1000);
});

Will endlessly toggle and untoggle button A so only button A and button B would be shown, but not button C.

How to toggle all associated buttons with JavaScript (how to totally uncollapse a collapsed data tree in JavaScript)?

[gillesmigliori]

Hi,

I think the setInterval function is not the best approach.

In your mediawiki example, there’s a single action attached to all the bullets.
Each bullet has a data-ct-state=“collapsed” attribute.
Clicking the bullet toggles the data-ct-state to “expanded”.

Then you just have to show/hide the children, with a script or CSS depending on your HTML structure. E.g;,
span[data-ct-state="collapsed] ~ div.category{diaply:none;}

I have a similar three with folders in this File Tree Generator demo

[bendqh1]

Sadly this code didn’t work, the tree stays the same:

document.querySelectorAll(".CategoryTreeToggle").forEach( (element)=>{
    element.setAttribute('data-ct-state', 'expanded');
    element.style.display = "block";
});

[bendqh1]

Furthermore, this code also didn’t work:

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

[bendqh1]

@gillesmigliori perhaps I have explained badly what I am trying to do or you misunderstood me.

If you think you might have misunderstood me somewhere along the lines, please tell me what you understood that I try to do.

[gillesmigliori]

My previous answer was just an example to show you the idea.

Here’s a working pen: https://codepen.io/migli/pen/PoEaPZN