Collapsibles

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

Quick Code

Copy to clipboard <div class="mw-collapsible mw-collapsed" data-expandtext="[OPEN]" data-collapsetext="[CLOSE]">Collapsible content</div>

## Introduction

This guide is about **collapsibles**, pieces of text, that when clicked on expand to reveal content below or next them. They are often used to clear up pages and save space, like when you have a long list but don't want it to be annoying to scroll through.

## Simple Collapsible

Simple collapsibles require very little coding knowledge and can be used easily. Below is an example of a simple collapsible:

Collapsible Content

The code for this:

```
<div class="mw-collapsible mw-collapsed" data-expandtext="Open Collapsible" data-collapsetext="Close Collapsible">Collapsible Content</div>
```

To customize the above template, Replace the 'Open' and 'Close' collapsible text with whatever you want!

## Styled Collapsibles

Styled collapsibles are collapsibles that have a 'style' element in their code that can affect things like border, background, font-family, etc.

### Bordered Collapsibles

Bordered collapsibles are made using the same code as simple collapsibles, but with an added 'border' attribute. Below is an example with a dotted border:

Collapsible

The code for this:

```
<div class="mw-collapsible mw-collapsed" data-expandtext="[OPEN CLASSIC COLLAPSIBLE]" data-collapsetext="[CLOSE CLASSIC COLLAPSIBLE]" style="border: 3px dotted black">Collapsible</div>
```

To customize this, simply replace the border type, size, and color with whatever you like.

### Collapsibles with backgrounds

Collapsibles with backgrounds are made just like bordered collapsibles, but with a 'background' attribute. Below is an example with a green background:

Collapsible content

The code for this:

```
<div class="mw-collapsible mw-collapsed" data-expandtext="Open Collapsible" data-collapsetext="Close Collapsible" style="background: green">Collapsible content</div>
```

Replace the 'green' with a color of your choice.

### Box Shadows

Box shadows can also be added to a collapsible for a more 3-D affect. Below is an example:

Collapsible content

The code for this:

```
<div class="mw-collapsible mw-collapsed" data-expandtext="[OPEN COLLAPSIBLE]" data-collapsetext="[CLOSE COLLAPSIBLE]" style="box-shadow: 5px 5px 10px black">Collapsible content</div>
```

Replace the 'black' with another color name, and the numbers before it with whatever numbers you want.

## Collapsible Buttons

So far, in the examples, we've only seen Collapsibles with words that open them. But, we can also do them with coded items, like the below example:

Contact
✉ Message Wall
To make it you click, type in:

```
<div class="mw-customtoggle-NAME" style="ATTRIBUTES HERE">Text to hit to open/close</div>
```

To insert the Collapsible content, type in:

```
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-NAME" style="z-index:300">COLLAPSIBLE CONTENT HERE!</div>
```

Make sure to replace **NAME** with your own unique name!

For more information, visit Buttons.

## More Ways to Customize

Collapsibles can also be customized using regular `div` attributes in the 'style' section of the code for a collapsible, and these attributes can be combined, like a collapsible with a border, background gradient, and text shadow! To do this, you need to know basic div Attributes, which I would recommend reading some of the basic pages here on, such as:

* Borders
* Backgrounds
* Text Shadow
* Text Size
* Text Color
* Text Modification
* Colors
* Box Shadow
* Border Radius
* Padding
* Cursors
* Opacity
* Line Height
* Letter Spacing

To make it into a button, read this article: Buttons

Simply type in what you are instructed to on those pages in the 'style' section of the collapsible!

Make sure to put a semicolon in between Attributes.

You can also contact one of the Staff members or one of the active users here to request a collapsible style to be coded for you!