Difference between revisions of "Template:Panels"
From From The Ashes Wiki
| Line 14: | Line 14: | ||
order: 0; | order: 0; | ||
} | } | ||
| − | .tab a, *:target ~ .tab_1 a { | + | .tab a, *:target ~ .tab_1.tab a { |
border-bottom: medium none; | border-bottom: medium none; | ||
display: inline-block; | display: inline-block; | ||
| Line 21: | Line 21: | ||
padding: 0 1em; | padding: 0 1em; | ||
} | } | ||
| − | .tab_1 a, .tab:target a { | + | .tab_1.tab a, .tab:target a { |
opacity: 1; | opacity: 1; | ||
} | } | ||
| Line 39: | Line 39: | ||
| key | | key | ||
| value | | value | ||
| − | | {{#ifexpr:{{#var: key}}>1|, | + | | {{#ifexpr:{{#var: key}}>1|, .tab_{{#var: key}}:target ~ #tab_{{#var: key}}-panel|.tab_1:target ~ #tab_1-panel}} |
}}{ | }}{ | ||
display: block; | display: block; | ||
| Line 46: | Line 46: | ||
| key | | key | ||
| value | | value | ||
| − | | {{#ifexpr:{{#var: key}}>1|<div id="tab_{{#var: key}}" class="tab anchor" tabindex="0"></div>|}} | + | | {{#ifexpr:{{#var: key}}>1|<div id="tab_{{#var: key}}" class="tab_{{#var: key}} tab anchor" tabindex="0"></div>|}} |
}} | }} | ||
| − | <div id="tab_1" class="tab anchor" tabindex="0"></div> | + | <div id="tab_1" class="tab_1 tab anchor" tabindex="0"></div> |
<div id="panels"> | <div id="panels"> | ||
{{#forargs: tab_ | {{#forargs: tab_ | ||
Revision as of 20:55, 17 March 2018
Usage
{{Panels
|tab_1 = name of tab (i.e., Something)
|content_1 = contents of panel (i.e., Here's some content about something.)
|tab_2 = name of tab (i.e., Another Thing)
|content_2 = contents of panel (i.e., Content about this other thing.)
[...]
|tab_N = name of tab (i.e., Something Else)
|content_N = contents of panel (i.e., Some information for this last thing too.)
}}
You can as many tabs/panels as you like, tab_1 through tab_N, but you don't need more than two (well, technically you only need one, but then why bother?). It may also get cluttered if you have too many tabs, but that's a matter of taste. contents_# can be as complicated as you like, as long as nothing is left open. The appearance can be adjusted more by writing custom css.
