Collapse
Use our collapse component to easily show and hide content
Usage
We understand collapsible content is somewhat difficult with pure CSS. Animating the max-height property with
CSS alone doesnt allow for a smooth transition between each accordion, which is why we have included a CSS & JS
version shown below.
We have provided the CSS so choose one of the options below or implement your own!
Notation:
- The container of the items should be prefixed with
collapse and use the
collapse-css for CSS close functionality (show below).
- Items should be tagged with the
collapse-item class.
- The
collapse-header is the wrapper for the visible content (text and icon).
- The
collapse-content is the unseen content and will become visible when the
user clicks the header.
Example:
Here we are using the checkbox trick to display the collapsible content.
Note: If using this technique ensure the checkbox id matches the label for attribute.
<div class="collapse collapse-css">
<div class="collapse-item">
<input type="checkbox" class="collapse-toggle" id="collapse1">
<label class="collapse-header" for="collapse1" tabindex="1">
<span class="collapse-title">Collapsible item no 1.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<p>Fingerstache paleo copper...</p>
</div>
</div>
<div class="collapse-item">
<input type="checkbox" class="collapse-toggle" id="collapse2">
<label class="collapse-header" for="collapse2" tabindex="1">
<span class="collapse-title">Collapsible item no 2.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content" >
<p>Photo booth bespoke ethical...</p>
</div>
</div>
<div class="collapse-item">
<input type="checkbox" class="collapse-toggle" id="collapse3">
<label class="collapse-header" for="collapse3" tabindex="1">
<span class="collapse-title">Collapsible item no 3.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<p>Cornhole organic yr, flannel air plant...</p>
</div>
</div>
</div>
Accordion
Accordions provide a way of expanding only one section of content at a time, great for large sections of
content. Click the header item to watch it expand.
Notation:
- If you wish to use our JS code at the bottom of the page, make sure you wrap your content with a
collapse-inner class inside the collapse-content
div.
- Add the
collapse-js class alongside the collapse
element, to enable transition & styling.
- Wrap the whole collapse inside a div, you can use whatever class name you want.
Fingerstache paleo copper mug 8-bit taiyaki. Semiotics normcore live-edge
mumblecore letterpress hammock flexitarian. Hexagon mlkshk tote bag
actually. Woke vaporware tumeric iPhone pop-up bushwick, cliche letterpress
raw denim affogato. Irony deep v salvia, farm-to-table bitters craft beer
chicharrones portland lo-fi kickstarter green juice. Flannel polaroid iPhone
fixie, franzen swag meggings hoodie cray master cleanse shabby chic.
Photo booth bespoke ethical, affogato snackwave plaid typewriter shaman
health goth master cleanse intelligentsia humblebrag. Keytar sartorial etsy
polaroid knausgaard. Roof party echo park man bun direct trade. Ethical la
croix yr, wayfarers beard chillwave man braid DIY austin brunch palo santo
cray plaid live-edge yuccie. XOXO thundercats fam keffiyeh bicycle rights
sriracha copper mug artisan shoreditch pitchfork gastropub neutra deep
v.
Cornhole organic yr, flannel air plant irony bicycle rights listicle locavore
crucifix kinfolk jianbing thundercats plaid. Kogi raw denim selvage, air
plant vice fashion axe 3 wolf moon offal schlitz occupy kinfolk distillery
yr. Franzen slow-carb DIY coloring book. Pitchfork hell of tacos, semiotics
squid shaman ennui mumblecore ugh etsy XOXO freegan umami. You probably
haven't heard of them wayfarers tumblr semiotics drinking vinegar iPhone
enamel pin fixie.
JS:
If using our JS code mentioned below, you can create a new accordion by creating a new Collapse object,
setting the parent (in our case accordion) and then addding an accordion
property set to true.
let accordion = new Collapse({
accordion: true,
parent: document.body.querySelector('.accordion')
});
Markup:
<div class="accordion">
<div class="collapse collapse-js">
<div class="collapse-item">
<label class="collapse-header">
<span class="collapse-title">Collapsible item no 1.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Fingerstache paleo copper...</p>
</div>
</div>
</div>
<div class="collapse-item">
<label class="collapse-header" for="collapsej2">
<span class="collapse-title">Collapsible item no 2.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Photo booth bespoke ethical, affogato...</p>
</div>
</div>
</div>
<div class="collapse-item">
<label class="collapse-header">
<span class="collapse-title">Collapsible item no 3.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Cornhole organic yr, flannel air plant...</p>
</div>
</div>
</div>
</div>
</div>
Expand
In order for the content to stay expanded when you click a collapsible item, just rid of the accordion property
in the JS. Go ahead a click the collapse items to see the effect.
Fingerstache paleo copper mug 8-bit taiyaki. Semiotics normcore live-edge
mumblecore letterpress hammock flexitarian. Hexagon mlkshk tote bag
actually. Woke vaporware tumeric iPhone pop-up bushwick, cliche letterpress
raw denim affogato. Irony deep v salvia, farm-to-table bitters craft beer
chicharrones portland lo-fi kickstarter green juice. Flannel polaroid iPhone
fixie, franzen swag meggings hoodie cray master cleanse shabby chic.
Photo booth bespoke ethical, affogato snackwave plaid typewriter shaman
health goth master cleanse intelligentsia humblebrag. Keytar sartorial etsy
polaroid knausgaard. Roof party echo park man bun direct trade. Ethical la
croix yr, wayfarers beard chillwave man braid DIY austin brunch palo santo
cray plaid live-edge yuccie. XOXO thundercats fam keffiyeh bicycle rights
sriracha copper mug artisan shoreditch pitchfork gastropub neutra deep
v.
Cornhole organic yr, flannel air plant irony bicycle rights listicle locavore
crucifix kinfolk jianbing thundercats plaid. Kogi raw denim selvage, air
plant vice fashion axe 3 wolf moon offal schlitz occupy kinfolk distillery
yr. Franzen slow-carb DIY coloring book. Pitchfork hell of tacos, semiotics
squid shaman ennui mumblecore ugh etsy XOXO freegan umami. You probably
haven't heard of them wayfarers tumblr semiotics drinking vinegar iPhone
enamel pin fixie.
JS:
If using our JS code mentioned below, you can create a new accordion by creating a new Collapse object and
setting the parent (in our case expand) like below.
let collapse = new Collapse({
parent: document.body.querySelector('.expand')
});
Markup:
<div class="expand">
<div class="collapse collapse-js">
<div class="collapse-item">
<label class="collapse-header">
<span class="collapse-title">Collapsible item no 1.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Fingerstache paleo copper mug 8-bit taiyaki...</p>
</div>
</div>
</div>
<div class="collapse-item">
<label class="collapse-header" for="collapsej2">
<span class="collapse-title">Collapsible item no 2.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Photo booth bespoke ethical, affogato...</p>
</div>
</div>
</div>
<div class="collapse-item">
<label class="collapse-header">
<span class="collapse-title">Collapsible item no 3.</span>
<i class="fas fa-chevron-down"></i>
</label>
<div class="collapse-content">
<div class="collapse-inner">
<p>Cornhole organic yr, flannel air...</p>
</div>
</div>
</div>
</div>
</div>
JS
Use our vanilla ES6 collapse code for your project, see below.
function Collapse(options) {
let defaultOpt = {
parent: document.body,
accordion: false,
outer: '.collapse-js',
header: '.collapse-header',
inner: '.collapse-content'
};
this.options = Object.assign(defaultOpt, options);
this.elements = {};
this.options.parent._collapse = this;
this.init();
}
Collapse.prototype.init = function () {
let opt = this.options,
ele = this.elements,
self = this;
let collapses = ele.collapses = opt.parent.querySelectorAll(opt.outer);
collapses.forEach(function (collapse) {
let headers = collapse.querySelectorAll(opt.header);
headers.forEach(function (header) {
header.addEventListener('click', function () {
if (opt.accordion) {
self.accordion(headers, header);
} else {
self.toggle(header.parentNode, false);
}
})
})
})
};
Collapse.prototype.accordion = function(header, current) {
let s = this;
header.forEach(function (el) {
s.toggle(el.parentNode, el !== current);
})
};
Collapse.prototype.toggle = function(item, closeForce) {
let height = 0;
let inner = item.querySelector(this.options.inner);
if (!item.classList.contains('active') && !closeForce) {
height = this.calcHeight(inner);
item.classList.add('active');
} else {
item.classList.remove('active');
}
inner.style.maxHeight = height + 'px';
};
Collapse.prototype.calcHeight = function(inner) {
let children = inner.children;
let height = 0;
for (let i = 0; i < children.length; i++) {
height += children[i].clientHeight;
}
return height;
};
Example usage:
let collapse = new Collapse({
parent: document.body.querySelector('.expand')
});
let accordion = new Collapse({
accordion: true,
parent: document.body.querySelector('.accordion')
});
Variables
Add a description here:
