Expand/Collapse All Spoilers

Replies: 0

Hey there,

Absolutely love the plugin, super easy to install and even easier to use! I’m working with a page full of spoilers and was searching around for a way to expand or collapse all of them at once and couldn’t find anything. I dusted off my meager old javascript skills and wrote a little snippet that does this. I know that if I was searching for it, there are probably 10 other people who searched and gave up. For those NEXT 10 looking for this feature, feel free to use my solution!

<script>
function ExpandCollapse() {
	var spoilers = document.getElementsByClassName("su-spoiler");
	var spoilerClasses;
	var me = document.getElementById("excoll");
	if (me.innerHTML == "Expand All") {
	me.innerHTML = "Collapse All";
	var i;
	for (i = 0; i < spoilers.length; i++) {
		spoilerClasses = spoilers[i].classList;
		spoilerClasses.remove("su-spoiler-closed");
	}
	} else {
	var i;
	for (i = 0; i < spoilers.length; i++) {
		spoilerClasses = spoilers[i].classList;
		spoilerClasses.add("su-spoiler-closed");
	}
	me.innerHTML = "Expand All";
	}
}
</script>
<a href="#" id="excoll" onclick="ExpandCollapse()">Expand All</a>