Help:Infobox development 2009 to 2011/How collapsing fields work

Collapsibility doesn't work this way anymore, but this page is nevertheless being retained for archival purposes.
czechout<staff /> ☎ ✍  04:34: Fri 26 May 2017

Collapsing fields, also known as auto-collapse and countless other names is (in this usage) all about making portions of the infobox that have no information in them collapse (so they can't be seen on the article).

This feature has been slowly implemented onto the Template:Infobox Individual, Template:Infobox Astronomical Object and Template:Infobox Species infoboxes. But to demonstrate how it functions (and the code behind it, the original and the test infobox will be shown below).

Regular Infobox

This is the infobox prior to any alterations:

You can see that all fields that are not filled in are present, with nothing beside them (featuring, enemy, writer, director, release date next release).

Edited infobox

This is the edited infobox. (You'll need to look at the code for this). But as you can see the areas of the infobox that are not filled in are not present in the final infobox. Please note that all fields of the infobox need to be present in order for this to function.

How this works

Below is the code that generates the above infobox (titled 'Edited infobox). If you've looked at the code of other infoboxes used on this wiki, they are generally the same, just with different names and colours swapped in and out.

For the collapsing fields to function a piece of code is added onto the code. This is:

• |- class{{{featuring}}}="hiddenStructure" style="vertical-align: top;"

This is added above whichever field that you wish to collapse and it is placed instead of:

• |- valign="top"

Adding this code makes whichever name listed within the {{{}}} autocollapse or be a hidden feature.

There is one important fact to remember, in order for this feature to function on article pages all of the fields listed for the infobox must be present, other wise within the infobox you will see something like {{next release}} on the article. This means the whole infobox needs to be intact for this to function correctly.

{| border="0" cellspacing="0" cellpadding="4" style="float:right; margin:0 0 .5em 1em; width:250px; background:#f1f4fa; border-collapse:collapse; border:1px solid #999; font-size:smaller; line-height:1.5; "
|- class{{{image}}}="hiddenStructure" style="vertical-align: top;"
| bgcolor=white align="center" colspan="2" | {{{image}}}
|- valign="top"
| align="center" colspan=2 bgcolor="#657383" style="border-bottom:0px solid gray; font-size:larger; color:white;" | '''{{{spinoff name}}}'''
|- class{{{main character}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" | '''Main Characters:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{main character}}}
|- class{{{featuring}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" | '''Featuring:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{featuring}}}
|- class{{{enemy}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" | '''Enemy:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{enemy}}}
|- class{{{setting}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" | '''Setting:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{setting}}}
|- class{{{writer}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Writer:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{writer}}}
|- class{{{director}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Director:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{director}}}
|- class{{{producer}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Producer:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{producer}}}
|- class{{{publisher}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Publisher:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{publisher}}}
|- class{{{release date}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Release Date:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{release date}}}
|- class{{{format}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Format:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{format}}}
|- class{{{previous release}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Previous Release:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{previous release}}}
|- class{{{next release}}}="hiddenStructure" style="vertical-align: top;"
| style="text-align: left; border-bottom:1px solid gray; border-top: 1px solid gray;" |  '''Next Release:'''
| style="border-bottom:1px solid gray; border-top: 1px solid gray;" | {{{next release}}}
|- valign="top"
|}