Filament Group

Code

Basic Collapsible


<div class="collapsible">
  <h4 class="collapsible-header">Toggle collapsible content</h4>
  <p class="collapsible-content">And this is the collapsible content</p>
</div>

Toggle collapsible content

And this is the collapsible content

Basic Collapsible with collapsed initial state


<div class="collapsible collapsible-collapsed">
  <h4 class="collapsible-header">Toggle collapsible content</h4>
  <p class="collapsible-content">And this is the collapsible content</p>
</div>

Toggle collapsible content

And this is the collapsible content

note: To safely collapse the collapsible when the page first renders, we'd recommend keying off an .enhanced class on the HTML element. Like this:


.enhanced .collapsible-collapsed .collapsible-content,
.collapsible-enhanced .collapsible-collapsed .collapsible-content {
	display: none;
}
		

Basic Collapsible with data-instructions override


<div class="collapsible" data-config data-instructions="click to toggle">
  <h4 class="collapsible-header">Toggle collapsible content</h4>
  <p class="collapsible-content">And this is the collapsible content</p>
</div>

Toggle collapsible content

And this is the collapsible content

Extensions!

Set of collapsibles that work as an accordion (data-set attributes with a shared value to your set)

Accordion A

And this is the accordion tab content

Accordion B

And this is the accordion tab content

Accordion C

And this is the accordion tab content

Accordion D

And this is the accordion tab content

Tabbed Collapsible Set

Tab A

And this is the content for tab A

Tab B

And this is the content for tab B

Tab C

And this is the content for tab C

Tab D

And this is the content for tab D

Menu and hover collapsibles

Any time a collapsible-content is absolute positioned, menu tap-out-to-collapse behavior will apply.

(With the data-collapsible-hover attribute included, any time collapsible-content is absolute positioned, menu hover behavior will apply as well.

To apply hover-exclusive behavior (for menus that do not toggle on click/tap, but only hover), set the data-collapsible-hover attribute to "exclusive".

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Just some content after the menu for testing purposes

Real link that should not work when menu is open

Just some content after the menu for testing purposes

Underlay collapsibles

(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.

External Toggle collapsibles

Clickable targets that exist outside of the collapsible HTML that can toggle any specified collapsible target. Works with checkbox, radio, select, links.

Toggle Collapsible Expand Collapsible Collapse Collapsible

Collapsible

Toggle with Checkbox (Collapsed by Default)

Collapsible

Toggle with Radio

Collapsible

Select Proxy