5,499 Pages

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

Standard Collapsing featureEdit

Collapsible tableEdit

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 :

[v · e · ?]
Straw Hat Pirates
Crew: Monkey D. Luffy  •  Roronoa Zoro  •  Nami  •  Usopp  •  Sanji  •  Tony Tony Chopper  •  Nico Robin  •  Franky  •  Brook  •  Jinbe  •  Nefertari Vivi  (Karoo )
Ships: Going Merry   •  Thousand Sunny  •  Shimashima Shopping   •  Karasumaru   •  Taru Tiger   •  Märchen   •  Tarumanma    •  Ma Ikkada    •  Sexy Foxy  
Vehicles: Shiro Mokuba I  •  Mini Merry II  •  Shark Submerge III  •  Kurosai FR-U IV  •  Brachio Tank V  •  General Franky  •  Rocket Man 
Devil Fruit Based: Gomu Gomu no Mi (Main Techniques  •  Gear Second  •  Gear Third  •  Gear Fourth)  •  Hito Hito no Mi (Rumble Ball)  •  Hana Hana no Mi  •  Yomi Yomi no Mi
Fighting Style Based: Haki (Kenbunshoku  •  Busoshoku  •  Haoshoku)  •  Black Leg Style (Diable Jambe)  •  Mutoryu  •  Fish-Man Karate (Fish-Man Jujutsu)
Weapon Based: Nidai Kitetsu   •  Santoryu (Ittoryu  •  Nitoryu  •  Kyutorryu) (Wado Ichimonji  •  Sandai Kitetsu  •  Yubashiri   •  Shusui   •  Enma)  •  Art of Weather (Clima-Tact   •  Perfect Clima-Tact   •  Sorcery Clima-Tact (Zeus))  •  Usopp's Arsenal (Ginga Pachinko   •  Kabuto   •  Kuro Kabuto (Pop Green))  •  Raid Suit  •  Peacock Slashers   •  Battle Frankies (Cyborg Tactics   •  Armored Me  •  General Franky (Kurosai FR-U IV  •  Brachio Tank V))  •  Soul Solid
Support: Wapometal  •  Voice of All Things
Related Articles
Others: Super Rookie  •  Worst Generation  •  Will of the D.  •  Straw Hat  •  Straw Hat Grand Fleet

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


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

<div class="NavFrame" style="border: 0px ">
   <div class="NavHead" style="background:transparent">
       [[Chapter 254|Chapter 254 cover]] <!-- name of the link -->
   <div class="NavContent"  style="display:none; ">
       [[File:Chapter 254.png|200px]] <!-- content of the hidden part-->

OpenWetWare ToggleEdit

This paragraph displays powerful toggle functions issued from OpenWetWare wiki.

Toggle classEdit

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

Basic function
<span class="_toggler-toto">toggle toto content</span>

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)

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

<div class="_toggle toto">content associated to class toto</div>

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

toggle tata content

I will disapeared when clicking on link above
More complex functions

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.

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 :

<div class="_toggle var1">Text displayed when cliking on var1</div>
<div class="_toggle_inithide var2">I appear when clicking on var2</div> <!-- inithide parameter allow to mask the text at page loading -->

<span class="_toggler_hide-var2 _toggler_show-var1">link to var1</span> | <!-- when clicking on this link one hide var2 class and show var1 one --> 
<span class="_toggler_hide-var1 _toggler_show-var2">link to var2</span> <!-- this one do the opposite, one hide var1 class and show var2 one --> 

Toggle TemplatesEdit

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
Community content is available under CC-BY-SA unless otherwise noted.