User:Chlod/Templates/toggle/doc

Example

Main page: User:Chlod/Blender

Click here to start the blender: 

Usage

This template allows you to create toggle-able elements with the power of CSS and TemplateStyles.

To use it, place a {{User:Chlod/Templates/toggletop}} template at the top of the content, and a {{User:Chlod/Templates/togglebot}} at the bottom. You can also wrap all contents as a parameter of {{User:Chlod/Templates/toggle}}, but this will pollute syntax highlighting for your wikitext editor.

After that, you'll need to set up styling. Create a CSS file at the TemplateStyles sandbox and then move it into your userspace after creation. Add the following lines of code to it, and then replace the comment with anything you want the contents to do when the toggle is activated.

.mw-collapsed + .ch-toggletarget {
    /* Your custom CSS statements here. */
}

You may alternatively use this button in order to quickly create this file. Make sure to move it to your userspace after creation. The filename must end with .css!

After creating the file, use the stylesheet on your page with the following wikitext:

<templatestyles src="<!-- Location of your stylesheet file here -->" />

When finished, any content between the top and bottom templates (or all content passed as part of {{User:Chlod/Templates/toggle}}) will be styled with the content you added in the CSS file.

Mechanism

This template works by fooling the sitewide JavaScript creating a collapsible "table" which is then picked up by the sitewide JavaScript and made interactive. This allows styling of the table depending on whether or not it is collapsed or not. The catch is that there is nothing else on the table except the toggle, which can then lead to interesting styling.

The + selector in CSS is responsible for most of the movie magic. It picks up the collapsed (or not) table, and styles the succeeding element based on that state. In other words, for the selector .mw-collapsed + .ch-toggletarget, what actually gets styled is the element with the ch-toggletarget class, not the toggle button. As such, it implements a client-side toggle whose actions can be controlled with CSS.

Customization

You can change the text of the toggle when enabled/disabled using CSS as well. The following will change the text to "disabled" when disabled and "enabled" when enabled.

.ch-toggle .mw-collapsible-toggle-default::before {
	content: '[disabled]' !important;
}

.ch-toggle.mw-collapsed .mw-collapsible-toggle-default::before {
	content: '[enabled]' !important;
}