Welcome to Software Development on Codidact!

Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.

Post History

66%

+2 −0

Q&A How to uncollapse an entire link tree with JavaScript?

You can use MutationObserver Quick example, disconnect logic is not mandatory and could be improved: const container = document.querySelector('.CategoryTreeResult'); let disconnectTimeout; ...

posted 2y ago by xbb‭ · edited 2y ago by xbb‭

Answer

#3: Post edited by

xbb‭ · 2022-04-10T14:40:05Z (over 2 years ago)
some improvements

Copy Link

Raw

Markdown

You can use `MutationObserver`
Quick example, disconnect logic is not mandatory and could be improved:
```js
const container = document.querySelector('.CategoryTreeResult');
~~function clickCollapsedToggles() {~~
~~container~~
~~.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]')~~
.forEach(c => c.click());
}
let disconnectTimeout;
const observer = new MutationObserver((mutationRecords, observer) => {
clickCollapsedToggles();
clearTimeout(disconnectTimeout);
disconnectTimeout = setTimeout(() => {
~~if (container.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]').length === 0) {~~
observer.disconnect();
}
}, 1000);
})
observer.observe(container, {
~~childList: true,~~
~~subtree: true~~
~~});~~
~~clickCollapsedToggles();~~
```

You can use `MutationObserver`
Quick example, disconnect logic is not mandatory and could be improved:
```js
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);
}
```

#2: Post edited by

xbb‭ · 2022-04-10T14:26:09Z (over 2 years ago)

Copy Link

Raw

Markdown

You can use `MutationObserver`
Quick example, disconnect logic is not mandatory and could be improved:
```js
const container = document.querySelector('.CategoryTreeResult');
function clickCollapsedToggles() {
container
.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]')
.forEach(c => c.click());
}
let disconnectTimeout;
const observer = new MutationObserver((mutationRecords, observer) => {
clickCollapsedToggles();
clearTimeout(disconnectTimeout);
disconnectTimeout = setTimeout(() => {
if (container.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]').length === 0) {
observer.disconnect();
}
}, 1000);
})
~~observer.observe(document.documentElement, {~~
childList: true,
subtree: true
});
clickCollapsedToggles();
```

You can use `MutationObserver`
Quick example, disconnect logic is not mandatory and could be improved:
```js
const container = document.querySelector('.CategoryTreeResult');
function clickCollapsedToggles() {
container
.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]')
.forEach(c => c.click());
}
let disconnectTimeout;
const observer = new MutationObserver((mutationRecords, observer) => {
clickCollapsedToggles();
clearTimeout(disconnectTimeout);
disconnectTimeout = setTimeout(() => {
if (container.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]').length === 0) {
observer.disconnect();
}
}, 1000);
})
observer.observe(container, {
childList: true,
subtree: true
});
clickCollapsedToggles();
```

#1: Initial revision by

xbb‭ · 2022-04-10T14:24:07Z (over 2 years ago)

Copy Link

Raw

Markdown

You can use `MutationObserver`

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

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

function clickCollapsedToggles() {
    container
        .querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]')
        .forEach(c => c.click());
}

let disconnectTimeout;

const observer = new MutationObserver((mutationRecords, observer) => {
    clickCollapsedToggles();

    clearTimeout(disconnectTimeout);
    disconnectTimeout = setTimeout(() => {
        if (container.querySelectorAll('.CategoryTreeToggle[data-ct-state=collapsed]').length === 0) {
            observer.disconnect();
        }
    }, 1000);
})

observer.observe(document.documentElement, {
    childList: true,
    subtree: true
});

clickCollapsedToggles();
```

Communities

Post History