coding help
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

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:

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!