OpenWetWare:Toggle
This feature allows for toggling the visibility of any part of the page.
Fun Examples
Probably the best way to learn how the toggle code works is to look at some examples (look at the source of this page).
Simple hiding
Multiple
- item1
- item2
- toggle item1
- toggle item2
- toggle both items
Show hide all
[show all] [hide all] (only shows/hides items that use the Template:Hide template)
Mutual toggling
- Toggle #2
- Toggle #1
Toggling table rows
Row 1, Column 1 | Row 1, Column 2 |
Row 2, Column 1 | Row 2, Column 2 |
- Toggle row 1
- Toggle row 2
Remote action
Nesting
[open level 1 ]
Usage
Toggling is based on the CSS class. You can specify the class of any element with the class attribute. For wiki text, it is usually the most convenient to add a span or div and assign a class to that, e.g. <div class="class1 class2 class3">'''wiki text here'''</div>. Notice that multiple classes are separated by spaces. Some classes have special meaning and all of these special classes begin with "_toggle". For elements that should be initially hidden, set their CSS display property to none, e.g. <div class="class1" style="display:none;"...</div>
Togglers
To define a basic toggler, add a class of the form _toggler-CLASS to an element. For example, <span class="_toggler-foo">foo toggler</span> produces foo toggler. Note that a link is automatically created but nothing happens when the link is clicked. That's because there are no elements of class "foo" on this page. If there were any such elements, all of their visibility would be toggled (i.e. if they are currently hidden, they are shown, and vice versa).
Some different type of togglers can also be created. The more general form for toggler classes are _toggler_OPERATION-CLASS, e.g. _toggler_show-foo. The default operation is the TOGGLE operation above. Other valid operations are:
- reset: all elements of the given class are reset to their original value (when the page was originally shown)
- show: all elements of the given class are made visible
- hide: all elements of the given class are hidden
Some things to note:
- togglers can toggle other togglers or even themselves
- togglers can have multiple toggle operations, e.g. "_toggler_hide-foo _toggler_show-bar" will hide all foo elements and show all bar elements
Toggle groups
To make it easier to use without having to explicitly define classes to toggle, there is a notion of a toggle group. A new toggle group is created when the class "_togglegroup" is seen in some element. This special class serves no other purpose than to delimit the boundary of a toggle group. Within a toggle group, togglers can be defined without a class to refer to all toggles within the toggle group, e.g. "_toggler" or "_toggler_reset". Toggles within a toggle group are defined using the class "_toggle".
Templates
Templates can make this much easier to use. Some existing templates are:
- Template:Hide
- This appears to handle 99% of the cases people use where by default nothing is shown and some text is hidden. A single show or hide button before the text allows for toggling the visibility.
- Template:Show hide all, Template:Show all, Template:Hide all
- Template:Toggle
- Template:Toggler
Technical Details
See MediaWiki:Common.js for the javascript code.