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:


Keywords:
aardvark beijing 
Doc ID:
30876
Owned by:
Xander Z. in DoIT Help Desk
Created:
2013-06-18
Updated:
2025-02-03
Sites:
DoIT Departmental Support, DoIT Help Desk, DoIT Help Desk Handbook, DoIT Help Desk Operations Team, DoIT Repair, ECMS, Help Desk Development Team, Microsoft 365, My UW-Madison Portal, WiscIT - Wisconsin IT Service Manager