User:Lionel.rowe/mimic-mobile-section-collapse.js

{

const isMobileSite = => window.location.hostname.split('.').includes('m')

document.head.insertAdjacentHTML('beforeend', ` /*	.mw-parser-output h2,	.mw-parser-output section > h3,	.mw-parser-output section > h4,	.mw-parser-output section > h5,	.mw-parser-output section > h6 {		display: flex;		justify-content: space-between;	}

.rot180 { transform: rotate(180deg); } `)

const groupOnSplitCondition = condition => arr => { const groups = [] for (const el of arr) { if (!groups.length || condition(el)) { groups.push([el]) } else { groups[groups.length - 1].push(el) }	}

return groups }

const pipe = (init, ...fns) => { return fns.reduce((val, fn) => fn(val), init) }

const groups = pipe(	document.querySelectorAll('.mw-parser-output > *'),	Array.from,	groupOnSplitCondition(x => x.nodeName === 'H2'),	x => x.filter(y => y[0]?.nodeName === 'H2'), )

if (!isMobileSite) { for (const [groupIdx, [heading, ...content]] of groups.entries) { const section = document.createElement('section') const btn = document.createElement('div') btn.classList = 'mw-ui-icon mw-ui-icon-mf-expand mw-ui-icon-element mw-ui-icon-small rot180' heading.insertBefore(btn, heading.firstChild) for (const [i, item] of content.entries) { if (!i) { item.replaceWith(section) }			section.appendChild(item) }		const toggle = => { section.hidden = !section.hidden btn.classList.toggle('rot180') }		heading.addEventListener('click', toggle) console.log({ heading, content }) } }

}