Collapsible Content

Available Sass Variables and default values

Examples

Basic Setup

Add .collapsible to any block element to make it collapsible. You also need to specify a 'collapsed' height using data-collapsed-height='30px'

To trigger the collapse, add data-collapse='#ID' to any element.

Initially Open Collapsible Content

p#quote.collapsible data-collapsed-height="20px" This is a lot of text that won't fit on one line. We face each other as God intended. Sportsmanlike. No tricks, no weapons, skill against skill alone. You mean, you’ll put down your rock and I’ll put down my sword, and we’ll try and kill each other like civilized people?

span data-collapse="#quote" data-more="More" data-less="Less"

This is a lot of text that wont fit on one line. We face each other as God intended. Sportsmanlike. No tricks, no weapons, skill against skill alone. You mean, you’ll put down your rock and I’ll put down my sword, and we’ll try and kill each other like civilized people?

Initially Closed Collapsible Content

Make sure the target and the trigger BOTH have the class of .collapsed if you want the element to start collapsed.

Make sure the data-collapsed-height value is set to the height of the collapsed container when the page loads.

p#quote.mar0b.collapsible.collapsed data-collapsed-height="20px" This is a lot of text that wont fit on one line. We face each other as God intended. Sportsmanlike. No tricks, no weapons, skill against skill alone. You mean, you’ll put down your rock and I’ll put down my sword, and we’ll try and kill each other like civilized people?

span.collapsed.primary-text data-collapse="#quote" data-more="More" data-less="Less"