User:Hagindaz/seccollapse.js

Note: After saving, changes may not occur immediately. Click here to learn how to bypass your browser's cache.

Mozilla / Firefox / Safari: hold down Shift while clicking Reload, or press Ctrl-Shift-R (Cmd-Shift-R on Apple Mac);
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5;
Konqueror: simply click the Reload button, or press F5;
Opera users may need to completely clear their cache in Tools→Preferences.

Warning: Malicious code can compromise your account. Page preview will cause your web browser to execute this page's content as code under some skins, including Monobook. If you have any questions about any code you plan to add, you can ask at the appropriate reading room.

Documentation for this script can be added at User:Hagindaz/seccollapse.

/**
 * seccollapse script
 * 
 * Collapses sections with headings which contain an element with 
 * class="seccollapse".
 * 
 * For example:
 * 
 * == <span class=seccollapse>A section</span> ==
 * This text will be collapsed until the above heading is clicked.
 * 
 * == <span class=seccollapse-start-open>Another section</span> ==
 * This text will collapse when the heading is clicked (but loads uncollapsed).
 * 
 * <div class=seccollapse-exclude>
 *     This text ends the previous section, and will not be collapsed.
 * </div>
 * 
 * This program is available under CC0 1.0, viewable at
 * http://creativecommons.org/publicdomain/zero/1.0/.
 */
(function(mw, $, d) {
	'use strict';
	mw.loader.using('mediawiki.util', function() {
		$(d).ready(function() {
			mw.util.addCSS(
				'.seccollapse, .seccollapse-start-open { cursor: pointer; padding-left: 17px; background: url(//upload.wikimedia.org/wikipedia/commons/thumb/f/f1/MediaWiki_Vector_skin_action_arrow.svg/17px-MediaWiki_Vector_skin_action_arrow.svg.png) left center no-repeat; }' + 
				'.seccollapse-collapsed { color: #0645ad ! important; background: url(//upload.wikimedia.org/wikipedia/commons/thumb/0/03/MediaWiki_Vector_skin_right_arrow.svg/17px-MediaWiki_Vector_skin_right_arrow.svg.png) left center no-repeat; }' + 
				'.seccollapse-collapsed:hover { text-decoration: underline; }'
			);
			
			$('.seccollapse, .seccollapse-start-open').click(function toggleSectionVisibility() {
				var $btn = $(this),
					$header = $($btn.parents(':header')),
					$body = $header.next('div.seccollapse-wrapper').length
						? $header.next()
						: $($header.nextUntil(headersList($header.get()[0].tagName) + ', .seccollapse-exclude')).wrapAll('<div class="seccollapse-wrapper" />').parent();
				
				/**
				 * Returns a list of header tag names up to the level of tagName.
				 * 
				 * headerList('h2') => 'h2'
				 * headerList('h3') => 'h2, h3'
				 * headerList('h4') => 'h2, h3, h4'
				 */
				function headersList(tagName) {
					var tags = [], i;
					for (i = 2; i <= Number(tagName.charAt(1)); i++) {
						tags.push('h' + i);
					}
					return tags.join(', ');
				}
				
				$btn.toggleClass('seccollapse-collapsed');
				$body.slideToggle(250);
			});
			
			$('.seccollapse')
				.not($(d.getElementById(d.location.hash.substring(1))).find('.seccollapse'))
				.click();
		});
	});
})(mediaWiki, jQuery, document);