To make a collapsible, you'll need the collapsible.css styles, jQuery (or equivalent), and collapsible.js script in your page.
<link rel="stylesheet" href="collapsible.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="collapsible.js"></script>
The collapsible HTML should be an element with a class of collapsible, and two child elements that become the header and content.
It'll automatically gain class-toggling behavior and proper ARIA attributes when a parent element (or the document) receives an "enhance" event.
This is the collapsible content. Currently, it's a p element, but it could be anything really, like a div containing other p's for example.
To collapse the collapsible when the page first renders, add the collapsible-collapsed class.
And this is the collapsible content
note: If you use JavaScript to add an .enhanced class on the HTML element from an inline script in the head of the page, it'll ensure that the collapsible is collapsed more immediately (and safely) before the collapsible JS applies.
That's because the collapsible CSS includes these rules:
.enhanced .collapsible-collapsed .collapsible-content,
.collapsible-enhanced .collapsible-collapsed .collapsible-content {
display: none;
}If the innerButton option is true, the contents of the collapsible header will be wrapped in a button element. Generally, this is preferable to the default behavior of converting the header to a button by adding aria attributes. If the header starts as a non-interactive element like a h3, we recommend setting this option to true. If the header starts as an anchor or other interactive element, it's best to use the default.
And this is the collapsible content
By default, the collapsible script will apply header and content classes to the first and second child elements, respectively. If this order isn't ideal, you can pre-apply the classes and the script will use those instead.
And this is the collapsible content
If, at certain media query breakpoints, you'd like to show a collapsible's content without offering the user any ability to toggle it, you can do that by setting the content element's CSS display to "block", and the header's cursor property to "default". This tells the collapsible that it should act as if it is non-interactive, and attributes like tabindex, role will be removed.
Collapsible allows you to override many presets via HTML data attributes.
To use any data attribute configuration, first include the data-config attribute, and then any others you'd like to specify.
The data-instructions attribute specifies a tooltip value.
And this is the collapsible content
Additionally, you can override the HTML classes that the collapsible script applies or looks for via data attributes:
collapsible-collapsedcollapsible-expandedcollapsible-headercollapsible-contentcollapsible-enhancedcollapsible (note: changing this class will prevent auto-initialization, so you'll have to call $(myelement).collapsible() to initialize the div.)Include the collapsible.set.js to use collapsible sets. A set of collapsibles work as an accordion. In the HTML, add data-set attributes with a shared value to include collapsibles in a set.
And this is the accordion tab content
And this is the accordion tab content
And this is the accordion tab content
And this is the accordion tab content
To make a collapsible set behave and appear as tabs, wrap the set in a div with a class of tabs,
include the collapsible.tab.js script, and something like the CSS in this example:
And this is the content for tab A. Sample link to test tab order.
And this is the content for tab B. Sample link to test tab order.
And this is the content for tab C. Sample link to test tab order.
And this is the content for tab D. Sample link to test tab order.
Include the collapsible.menu.js script. Any time a collapsible-content is absolute positioned, menu tap-out-to-collapse behavior will apply. The following example has an absolute-positioned collapsible-content div at wider viewport sizes, making it closeable via click/tap-out.
Include the collapsible.menuactiveitem.js script. Any time a collapsible-content is absolute positioned, menu tap-out-to-collapse behavior will apply. The following example has an absolute-positioned collapsible-content div at wider viewport sizes, making it closeable via click/tap-out.
(With the data-collapsible-hover attribute included, any time collapsible-content is absolute positioned, menu hover behavior will apply as well.
To apply exclusively behavior (for menus that do not toggle on click/tap, but only hover), set the data-collapsible-hover attribute to "exclusive".
Include the collapsible.menuunderlay.js. (Once included, a collapsible with a data-collapsible-underlay attr will receive an underlay div sibling (prepended to its parent) with classes .collapsible-underlay and, when collapsed, .collapsible-underlay-hidden.
Include collapsible.externaltoggle.js. Clickable targets that exist outside of the collapsible HTML that can toggle any specified collapsible target. Works with checkbox, radio, select, links.
Include the collapsible.externaltoggle.js script.
Include the collapsible.externaltoggle.js script.
Include the collapsible.selectproxy.js script.
Add the data-collapsible-follow-link attribute to keep preventDefault() from firing.
Collapsible navbars manage a list of navigation items to move any items into a "More" menu that can't fit at a given width. To create a navbar, include the collapsible.navbar.js script and collapsible.navbar.css stylesheet, and follow this markup pattern. The data attribute class overrides are necessary for the navbar to pick up the styles in the component stylesheet. The data-collapsible-ismenu attribute ensures that the "more" menu picks up menu-like features like click-out to close, even though its menu items are not in fact positioned absolute.
Collapsible navbars manage a list of navigation items to move any items into a "More" menu that can't fit at a given width. To create a navbar, include the collapsible.navbar.js script and collapsible.navbar.css stylesheet, and follow this markup pattern. The data attribute class overrides are necessary for the navbar to pick up the styles in the component stylesheet. The data-collapsible-ismenu attribute ensures that the "more" menu picks up menu-like features like click-out to close, even though its menu items are not in fact positioned absolute.