Difference between revisions of "Template:ClickTabs"

From comp.tf
Jump to navigation Jump to search
 
(60 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{| style="text-align: center; width: 100%; border: 0; border-spacing: 0; border-collapse: collapse; vertical-align: top;"
+
<includeonly>{| class="clicktabs" style="text-align: center; border: 0; border-spacing: 0; border-collapse: collapse; vertical-align: top; margin:1em 0"
−
| style="padding: 0.5em; background-color: #cee0f2; font-size: 95%; line-height: 0.95em; border: solid 2px #a3b1bf; white-space: nowrap; width: 20px;" | closedtab
+
{{#if:{{{tab1|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|1|clicktabs-active|{{#if:{{{activetab|}}}|clicktabs-inactive|clicktabs-active}}}}" id="clicktabs-tab-1" {{!}} '''{{{tab1|}}}'''
−
| style="border-bottom: 2px solid #a3b1bf; width: 3px;" |
+
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
−
| style="padding: 0.5em; background-color: white; line-height: 0.95em; border: solid 2px #a3b1bf; border-bottom: solid 2px white; font-weight: bold; white-space: nowrap; width: 20px;" | opentab
+
{{#if:{{{tab2|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|2|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-2" {{!}} '''{{{tab2|}}}'''
−
| style="border-bottom: 2px solid #a3b1bf; width: 3000px;" |
+
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab3|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|3|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-3" {{!}} '''{{{tab3|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab4|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|4|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-4" {{!}} '''{{{tab4|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab5|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|5|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-5" {{!}} '''{{{tab5|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab6|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|6|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-6" {{!}} '''{{{tab6|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab7|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|7|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-7" {{!}} '''{{{tab7|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab8|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|8|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-8" {{!}} '''{{{tab8|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab9|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|9|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-9" {{!}} '''{{{tab9|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab10|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|10|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-10" {{!}} '''{{{tab10|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab11|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|11|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-11" {{!}} '''{{{tab11|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab12|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|12|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-12" {{!}} '''{{{tab12|}}}'''
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}<!--
 +
{{#if:{{{tab13|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|13|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-13" {{!}} {{{tab13|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab14|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|14|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-14" {{!}} {{{tab14|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab15|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|15|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-15" {{!}} {{{tab15|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab16|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|16|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-16" {{!}} {{{tab16|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab17|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|17|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-17" {{!}} {{{tab17|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab18|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|18|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-18" {{!}} {{{tab18|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab19|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|19|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-19" {{!}} {{{tab19|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}
 +
{{#if:{{{tab20|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|20|clicktabs-active|clicktabs-inactive}}" id="clicktabs-tab-20" {{!}} {{{tab20|}}}
 +
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}}}}}}}}}}}}}}}}}-->}}}}}}}}}}}}}}}}}}}}}}}}
 +
| style="border-bottom: 2px solid #aaa; width: 3000px;" |
 
|-
 
|-
−
| style="border: solid 2px #a3b1bf; border-top: 0; text-align: left; padding:5px" colspan=100 | content
+
{{#if:{{{content1|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-1" style="{{#ifeq:{{{activetab|}}}|1||{{#if:{{{activetab|}}}|display:none||}}}}" colspan=100 {{!}} {{{content1|}}}
−
|}
+
{{#if:{{{content2|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-2" style="{{#ifeq:{{{activetab|}}}|2||display:none}}" colspan=100 {{!}} {{{content2|}}}
−
 
+
{{#if:{{{content3|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-3" style="{{#ifeq:{{{activetab|}}}|3||display:none}}" colspan=100 {{!}} {{{content3|}}}
−
 
+
{{#if:{{{content4|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-4" style="{{#ifeq:{{{activetab|}}}|4||display:none}}" colspan=100 {{!}} {{{content4|}}}
−
 
+
{{#if:{{{content5|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-5" style="{{#ifeq:{{{activetab|}}}|5||display:none}}" colspan=100 {{!}} {{{content5|}}}
−
<div style="width: 100%; overflow: hidden">
+
{{#if:{{{content6|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-6" style="{{#ifeq:{{{activetab|}}}|6||display:none}}" colspan=100 {{!}} {{{content6|}}}
−
<div style="padding: 0.5em; margin-right: 3px; float: left; border: solid 2px #a3b1bf; border-bottom: 0; background-color: white; ">Tab 1</div>
+
{{#if:{{{content7|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-7" style="{{#ifeq:{{{activetab|}}}|7||display:none}}" colspan=100 {{!}} {{{content7|}}}
−
<div style="padding: 0.5em; margin-right: 3px; float: left; border: solid 2px #a3b1bf; background-color: #cee0f2; ">Tab 2</div>
+
{{#if:{{{content8|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-8" style="{{#ifeq:{{{activetab|}}}|8||display:none}}" colspan=100 {{!}} {{{content8|}}}
−
<div style="padding: 0.5em; margin-right: 3px; float: left; border: solid 2px #a3b1bf; background-color: #cee0f2; ">Tab 3</div>
+
{{#if:{{{content9|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-9" style="{{#ifeq:{{{activetab|}}}|9||display:none}}" colspan=100 {{!}} {{{content9|}}}
−
</div>
+
{{#if:{{{content10|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-10" style="{{#ifeq:{{{activetab|}}}|10||display:none}}" colspan=100 {{!}} {{{content10|}}}
 +
{{#if:{{{content11|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-11" style="{{#ifeq:{{{activetab|}}}|11||display:none}}" colspan=100 {{!}} {{{content11|}}}
 +
{{#if:{{{content12|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-12" style="{{#ifeq:{{{activetab|}}}|12||display:none}}" colspan=100 {{!}} {{{content12|}}}<!--
 +
{{#if:{{{content13|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-13" style="{{#ifeq:{{{activetab|}}}|13||display:none}}" colspan=100 {{!}} {{{content13|}}}
 +
{{#if:{{{content14|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-14" style="{{#ifeq:{{{activetab|}}}|14||display:none}}" colspan=100 {{!}} {{{content14|}}}
 +
{{#if:{{{content15|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-15" style="{{#ifeq:{{{activetab|}}}|15||display:none}}" colspan=100 {{!}} {{{content15|}}}
 +
{{#if:{{{content16|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-16" style="{{#ifeq:{{{activetab|}}}|16||display:none}}" colspan=100 {{!}} {{{content16|}}}
 +
{{#if:{{{content17|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-17" style="{{#ifeq:{{{activetab|}}}|17||display:none}}" colspan=100 {{!}} {{{content17|}}}
 +
{{#if:{{{content18|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-18" style="{{#ifeq:{{{activetab|}}}|18||display:none}}" colspan=100 {{!}} {{{content18|}}}
 +
{{#if:{{{content19|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-19" style="{{#ifeq:{{{activetab|}}}|19||display:none}}" colspan=100 {{!}} {{{content19|}}}
 +
{{#if:{{{content20|}}}|{{!}} class="clicktabs-content" id="clicktabs-content-20" style="{{#ifeq:{{{activetab|}}}|20||display:none}}" colspan=100 {{!}} {{{content20|}}}}}}}}}}}}}}}}}}}-->}}}}}}}}}}}}}}}}}}}}}}}}
 +
|}</includeonly><noinclude>{{documentation}}[[Category:Templates]]</noinclude>

Latest revision as of 07:19, 28 April 2021

(view - edit) Documentation

Template:ClickTabs generates a series of tabs and content slides designed to show lots of content in a small space and on a single page.

The template currently supports up to 12 tabs and 12 content slides, but can easily be expanded if later needed. Credit to Wikipedia for the styling.

Usage

{{ClickTabs
|tab1=First Tab
|content1=This is the content for the first tab.

|tab2=Second Tab
|content2=This is the content for the second tab.

|tab3=Third Tab
|content3=This is the content for the third tab.
}}

Generates:

First Tab Second Tab Third Tab
This is the content for the first tab.

Optional parameters

Additionally, the |activetab= parameter may be used to manually set which slide will show. The template will always default to the first tab if this parameter is not set. 

{{ClickTabs
|activetab=2

|tab1=First Tab
|content1=This is the content for the first tab.

|tab2=Active Tab
|content2=This is the content for the second tab. It will be active by default.

|tab3=Third Tab
|content3=This is the content for the third tab.
}}

Generates:

First Tab Second Tab Third Tab
This is the content for the second tab. It will be active by default.
Retrieved from "http://comp.tf/index.php?title=Template:ClickTabs&oldid=66409"