How to expand/collapse all treeview nodes in microsoft documentation?

Question

I'm studying several topics in the Microsoft documentation and often the expanded or collapsed nodes get in my way. Would anyone know how to make all nodes expand or collapse automatically?

A link for ms-docs: https://learn.microsoft.com/en-us/windows/win32/windows-application-ui-development

Answer 1

The website does not provide such an action. However, you can prepare and run a bookmarklet (a bookmark that executes JavaScript on the page) or run a script in the developer console to collapse them all:

for (const x of document.querySelectorAll('.is-expanded')) x.classList.remove('is-expanded')

The expanded tree nodes have the is_expanded class. Removing them collapses them.

You can put this code into a bookmark as well, prefixing it with javascript:. Then triggering ("opening") the bookmark is enough.

javascript:for (const x of document.querySelectorAll('.is-expanded')) x.classList.remove('is-expanded')

---

Expanding all is not so simple though, because the sublist is not loaded by default. After you expanded them once, and the sublist has been loaded, you can expand by adding the is-expanded class:

for (const x of document.querySelectorAll('.tree-expander')) x.classList.add('is-expanded')