MediaWiki talk:Gadget-Tabs.js

Documentation

(Coming soon. Maybe. Drop a message at User talk:Abdullah if you really want this)

• The clickable tab elements should all be siblings (and all siblings must be tabs?) and have the class "tab"
• Add the class "tabcontainer" to an ancestor of a tab element (or the tab itself?)
• Add the class "tabcontents" to a sibling of the "tabcontainer", and all children that are tab-linked elements should have the class "content"
• The nth .tabcontainer..tab element clicked will make the nth .tabcontents.content element show

e.g. element hierarchy: (I think...?)
tabcontainer - - - - - tabcontents
     |                      |
     |           content content content
tab tab tab      

Correct me if I'm wrong --KokoroSenshi (talk | contribs) 02:49, 13 January 2017 (UTC)

Examples

First Second Third

1st

2nd

3rd

First Second Third

1st

2nd

3rd (Displayed if JS is disabled)

File:Wind Waker wand.png The Legend of Zelda Songs File:Oracle of Ages - Harp of Ages.png
1st 2nd 3rd 4th 5th	First Second Third Fourth Fifth

{{#css: .tab { text-align:center; font-size: 90%; padding: 3px; margin: 0px; border: 2px solid #426787; background-color: #1D578B; white-space: nowrap; cursor:pointer; }

span.tab:hover, div.tab:hover, td.tab:hover { background-color:#1b5181; color:#F4F26B; }

.active { background-color:#17456e !important; border-bottom: 2px solid #17456E; color: #F4F26B; }

.vertical .tab { margin:2px 0; width:70px; position:relative; left:-4px; }

.vertical .active { border-left: 2px solid #17456E; border-bottom: 2px solid #426787; }

.tabcontainer p { margin:0; } }}