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 );

}

});