Collapsible Panels - Additional CSS (Internal)
This document includes the JavaScript and CSS for collapsible panels, including additional CSS for nested
collapsibles. The includedoc for this page should be enclosed in an Internal tag:
<span class="internal"><a class="includedoc">30876</a></span>
.
Note: <span class="internal">
must use double quotes (") instead of
single (').
Instructions
-
To use both internal and external stylesheets in the same document, copy and paste the following code into
the "JavaScript/CSS" field (under "Additional Fields" at the bottom):
-
For 'collapse all' and 'expand all' links, insert
<div class='collapsibleExpander'></div>
. This will automatically generate the necessary links. -
Collapsible panels are enclosed in
<div class='collapsible'>
elements. They will be colored to match the Internal site. -
Nested collapsibles can have a separate color scheme, to distinguish them from the top-level panels. These
are identified by
<div class='collapsible nested'>
tags. These can be further offset by enclosing them in<div class='nest'>
tags, which adds indentation on both the left and right sides. -
To set a panel to be expanded by default, add 'open' to that particular panel's class name. For example,
<div class='collapsible nested open'>
- A few examples of documents that use these includes are: