Template:ButtonHeader

Documentation Edit this documentation at Template:ButtonHeader/doc.

(edit • history • purge)

ButtonHeader creates a big clickable section header (with an optional icon) that expands and collapses a block of content beneath it.

Overview

This template renders a collapsible section: a styled header bar you click to show or hide everything inside it. The header can show a small icon to the left of its label, and the hidden body can contain any wikitext — tables, {{ItemInfobox}} grids, more templates, etc. It is used heavily on collection-style pages such as Pets, Mounts and class pages (e.g. Arcanist) to group items by rarity/category behind expandable buttons.

Parameters

Parameter	Required?	What it does	Example
type	Required	Unique id that links the header to its collapsible body. Must be different for every ButtonHeader on the same page or two headers will toggle together.	arcanistweapons
text	Required	The label shown in the header bar.	Weapons
img	Optional	File name of the header icon, without the .png extension (the template adds it). Rendered at 64px. Omit for a text-only header.	Ut-Magnificat
content	Required	The wikitext that is shown/hidden when the header is clicked. Can be anything: text, tables, tabbers, other templates.

How to use

1. Pick a unique type id for this header (lowercase, no spaces is safest, e.g. petsusual). Reuse the same word nowhere else on the page. 2. Set text to the words you want on the button. 3. Optionally set img to an icon file name with NO extension — img=Ut-Magnificat displays File:Ut-Magnificat.png. The image link is disabled, so it is decorative only. 4. Put everything that should hide/show under content=. Because content usually spans many lines, put |content= on its own line and write the body underneath it, then close the template with }} on its own line. 5. The body starts collapsed (hidden) by default.

Copy this

{{ButtonHeader
|type=
|text=
|img=
|content=
}}

Example

 File:2DSlimeArcher.png Usual

Completion Reward: Rare Soul Point Potion

Slime Archer

File:3DSlimeArcher.png

Stats

Type

Ranged

Damage

12 (4 dps)

Info

Obtained From

Skull Cavern

{{ButtonHeader
|type=exampleusual
|text=Usual
|img=2DSlimeArcher
|content=
Completion Reward: [[Transcendence|Rare Soul Point Potion]]
{{ItemInfobox
| title = Slime Archer
| images = 3DSlimeArcher.png
| Type = Ranged
| Damage = 12 (4 dps)
| Drop = [[Skull Cavern]];Key-SkullCavern
}}
}}

Tips & notes

• The single most common mistake is reusing the same type value twice on a page — both headers then expand/collapse as one. Always make type unique.
• img takes the bare file name only. Do not write img=Ut-Magnificat.png and do not write File:... — the template adds .png for you.
• The body is collapsed on load. There is no parameter to make it start expanded.
• content commonly wraps a <div style="display:flex;flex-wrap:wrap;..."> and a list of {{ItemInfobox}} calls (see Pets). It can also hold a <tabber> for sub-sections (see Arcanist).
• Related: {{ItemInfobox}} (the cards usually placed inside), and the hoverbox div that often wraps a ButtonHeader.