Difference between revisions of "Template:ClickTabs"

From comp.tf
Jump to navigation Jump to search
Line 1: Line 1:
<includeonly>{| class="clicktabs" style="text-align: center; width: 100%; border: 0; border-spacing: 0; border-collapse: collapse; vertical-align: top; margin:1em 0"
+
<includeonly>{| class="clicktabs" style="text-align: center; border: 0; border-spacing: 0; border-collapse: collapse; vertical-align: top; margin:1em 0"
 
{{#if:{{{tab1|}}}|{{!}} class="clicktabs-tab {{#ifeq:{{{activetab|}}}|1|clicktabs-active|{{#if:{{{activetab|}}}|clicktabs-inactive|clicktabs-active}}}}" id="clicktabs-tab-1" {{!}} {{{tab1|}}}
 
{{#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 #aaa; width:3px;" {{!}}
 
{{!}} style="border-bottom:2px solid #aaa; width:3px;" {{!}}

Revision as of 11:46, 22 April 2020

(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.