One Piece Wiki:Toggling Help

The toggling functions are helpful javascript code that help changing the appearance of a page by masking or revealing some part of text.

Collapsing table
This is a standard class from wikipedia principaly use with table). It allows to hide some part of a table that can be revealed by clicking on a cross This is use for all of our navigation tables at the end of most of the articles :

Basic use of collapsable table can be found in Help:Collapsing

NavFrame
A more advanced feature use the three classes NavFrame, NavHead, NavContent (Cf w:Wikipedia:NavFrame) which allows more customizable code Ex : To hide an image that displays Chapter 254 cover

Chapter 254 cover

OpenWetWare Toggle
This paragraph displays powerful toggle functions issued from OpenWetWare wiki.

Toggle class
The main idea of this toggling function is to create a specific class ans assoiate it some toggling functions such as hide and show

toggle toto content will create a class toto and a link toggle toto content. When the user click on the link, all the elements associated to the class toto will be toggled (ie will no be visible until we click on the link again)
 * Basic function

To associate an element with the toto class, one use the div markup as follows : content associated to class toto

So in a similar way, let's create a class tata and a content associated to this class. click several time on link below to see what happens
 * Example

toggle tata content I will disapeared when clicking on link above

Each toggler class is associated with 3 basic functions hide, show, reset and two possible initial value inithide, initshow. Also the span markup can be associated with several classes allowing many possibilities.
 * More complex functions

Example to replace a text with another. Depending on the link one click a different text appears :

Text displayed when cliking on var1 I appear when clicking on var2

link to var1 |link to var2

This is achieved by entering the following code : Text displayed when cliking on var1 I appear when clicking on var2

link to var1 | link to var2

Toggle Templates
The following templates have been installed from OpenWetWare site
 * Template:Hide allows to toggle a part of text associated with a show/hide link
 * Template:Toggle allows to create a Toggle element that can be called by toggle functions