ITS

Information Technology Services
Information Technology Services

Collapsible Content

The Collapsible Content class is a useful way to provide a small amount of information that can be expanded to show greater detail.  A great way to display questions with the answer available with a single click.

There are three types of collapsible content currently available:

The code for each collapsible container has two parts, the text that will appear in the title, and the content that will be expanded when the title is selected.  Enter the code in the Source (HTML) mode.

Collapsible Fieldset

Markup

<fieldset class="collapsible-container"><legend>Your legend/title here</legend>
<div>Content that will NOT be collapsed</div>
<div class="collapsible-content">Content that WILL be collapsed</div>
</fieldset>

Result:

Your legend/title here
Content that will NOT be collapsed
Content that WILL be collapsed

 

Collapsible Container - black text on grey gradient banner

Markup

<div class="collapsible-container light">
<div class="collapse-title">My title</div>
<div class="collapsible-content">My Content</div>
</div>

Result:

My title
My Content

 

Collapsible Container - white text on blue gradient banner

Markup

<div class="collapsible-container">
<div class="collapse-title">My title</div>
<div class="collapsible-content">My Content</div>
</div>

Result:

My title
My Content