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