User:The wub/tocExpandAll.js

/* Add an expand/collapse all button to the top of the Vector 2022 table of contents See also https://phabricator.wikimedia.org/T302426

To install add this line: importScript('User:The wub/tocExpandAllSandbox.js');

to https://en.wikipedia.org/wiki/Special:MyPage/vector-2022.js

$( document ).ready(function {

if (        mw.config.get('skin') === 'vector-2022' &&        document.querySelector('.vector-toc-level-1 ul li') // any subsections?    ) { const expandButton = document.createElement('button'); expandButton.innerText = 'expand all'; expandButton.classList.add('vector-pinnable-header-toggle-button', 'vector-toc-expand-all'); expandButton.addEventListener( 'click', e => {           document.querySelectorAll('.vector-toc-contents .vector-toc-level-1').forEach( node => node.classList.add('vector-toc-list-item-expanded') );           document.querySelectorAll('.vector-toc-contents [aria-expanded="false"]').forEach( node => node.setAttribute('aria-expanded', 'true') );           expandButton.style.display = 'none';            collapseButton.style.display = 'inline-block';            collapseButton.focus({ preventScroll: true });        }); const collapseButton = document.createElement('button'); collapseButton.innerText = 'collapse all'; collapseButton.classList.add('vector-pinnable-header-toggle-button', 'vector-toc-collapse-all'); collapseButton.addEventListener( 'click', e => {           document.querySelectorAll('.vector-toc-contents .vector-toc-level-1').forEach( node => node.classList.remove('vector-toc-list-item-expanded') );           document.querySelectorAll('.vector-toc-contents [aria-expanded="true"]').forEach( node => node.setAttribute('aria-expanded', 'false') );           collapseButton.style.display = 'none';            expandButton.style.display = 'inline-block';            expandButton.focus({ preventScroll: true });        });

// Any already expanded sections? if ( document.querySelector('.vector-toc-list-item-expanded ul li') ) { expandButton.style.display = 'none'; collapseButton.style.display = 'inline-block'; } else { expandButton.style.display = 'inline-block'; collapseButton.style.display = 'none'; }

const tocHeader = document.querySelector('.vector-toc-pinnable-header'); tocHeader.appendChild( expandButton ); tocHeader.appendChild( collapseButton );

} });