User:Sophivorus/Collapser.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/**
 * This snippet hides all third-level lists
 * and shows a little arrow button next to their parent items
 * to show the hidden lists on click
 */
var collapser = {

	init: function () {
		$( 'ul' ).not( collapser.inToC ).each( collapser.collapse );
	},

	inToC: function () {
		return $( this ).parents( '.toc' ).length ? true : false;
	},

	collapse: function () {
		var list = $( this );
		var depth = list.parents( 'ul' ).length;
		if ( depth > 0 ) {
			list.hide();
			collapser.addButton( list );
		}
	},

	addButton: function ( list ) {
		var parent = list.parent( 'li' );
		parent.css({
			'position': 'relative',
			'list-style': 'none'
		});
		var button = $( '<span>' ).text( '►' ).css({
			'cursor': 'pointer',
			'position': 'absolute',
			'left': '-1em'
		});
		button.click( list, collapser.toggleChildren );
		parent.prepend( button );
	},

	toggleChildren: function ( event ) {
		var button = $( this );
		var list = event.data;
		list.toggle();
		if ( list.is( ':visible' ) ) {
			button.text( '▼' );
		} else {
			button.text( '►' );
		}
	}
};

$( collapser.init );