Keyboard shortcut to Collapse all or Expand all

English Forum Product Feedback
2

Maybe this could help

The provided JavaScript code snippet is a bookmarklet that can be used to toggle the visibility of task groups on a webpage. Here’s a breakdown of what it does:

  1. Select the first toggle button icon:
    The code starts by selecting the first element on the page with the class TaskGroupHeader-toggleButton that contains an icon (identified by the class Icon).

    const firstButtonIcon = document.querySelector('.TaskGroupHeader-toggleButton .Icon');

  2. Check if the icon exists:
    It checks if this icon exists. If it doesn’t, the function stops executing.

    if (!firstButtonIcon) return;

  3. Determine the current state of the icon:
    The code checks whether the icon has a class indicating that it’s either a “down triangle” or a “right triangle.” This likely corresponds to whether the task group is expanded (down triangle) or collapsed (right triangle).

    const firstTriangleClassName = firstButtonIcon.classList.contains('DownTriangleIcon') ? 'DownTriangleIcon' : 'RightTriangleIcon';

  4. Toggle all similar icons:
    The code selects all icons on the page that have the same triangle class (either all expanded or all collapsed), then simulates a click on their parent element (likely a button), which toggles their state.

    document.querySelectorAll(`.TaskGroupHeader-toggleButton .${firstTriangleClassName}`).forEach(buttonIcon => buttonIcon.parentNode.click());

Summary: This script is designed to toggle the state (expand or collapse) of all task groups on a webpage that have the same initial state as the first task group it finds. If the first task group is expanded, clicking the bookmarklet will collapse all expanded task groups, and if the first task group is collapsed, it will expand all collapsed task groups.

2 Likes