User:InnerCitadel/Gadget-collapsibleH2.js

function docReady(fn) { // see if DOM is already available if (document.readyState === "complete" || document.readyState === "interactive") { // call on next available tick setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } }

if (window.innerWidth < 768 && document.querySelectorAll('h2').length > 4){ //only happen if window width is below value and if there are more than a certain number of h2 elements docReady(collapsibleHeadings); }

function collapsibleHeadings {

// Get all the headings var headings = document.querySelectorAll('.mw-parser-output h2'); Array.prototype.forEach.call(headings, function (heading) {   // Give each a toggle button child    // with the SVG plus/minus icon    heading.innerHTML = "" + heading.innerText + "  ";

// Function to create a node list // of the content between this and the next

var getContent = function getContent(elem) { var elems = [];

while (elem.nextElementSibling && elem.nextElementSibling.tagName !== 'H2') { elems.push(elem.nextElementSibling); elem = elem.nextElementSibling; } // Delete the old versions of the content nodes

elems.forEach(function (node) {       node.parentNode.removeChild(node);      }); return elems; }; // Assign the contents to be expanded/collapsed (array)

var contents = getContent(heading); // Create a wrapper element for `contents` and hide it

var wrapper = document.createElement('div'); wrapper.hidden = true; // Add each element of `contents` to `wrapper`

contents.forEach(function (node) {     wrapper.appendChild(node);    }); // Add the wrapped content back into the DOM // after the heading

heading.parentNode.insertBefore(wrapper, heading.nextElementSibling); // Assign the button

var btn = heading.querySelector('button');

btn.onclick = function { // Cast the state as a boolean var expanded = btn.getAttribute('aria-expanded') === 'true' || false; // Switch the state

btn.setAttribute('aria-expanded', !expanded); // Switch the content's visibility

wrapper.hidden = expanded; }; }); }