The Trowel project is abandonned. Trowel core and the Trowel components are no more maintained or supported. More infos

Download

You can fetch Trowel Collapses with npm, yarn or bower.

# With bower
$ bower install --save trowel-collapses

# With npm
$ npm install --save trowel-collapses

# With yarn
$ yarn add trowel-collapses

You can also download a zip archive right here.

Installation

SCSS

The main scss file to include to your main .scss file is located at the ./src/scss/collapses.scss. As a Trowel Component, it also requires two dependencies to compile the scss code. Here an scss installation snippet.

// Trowel core (need to be imported first)
@import './path/to/dependencies/trowel-core/src/trowel';

// Trowel Collapses
@import './path/to/dependencies/trowel-collapses/src/scss/collapses';

JavaScript

The javascript file is located at the ./dest/javascript/collapses.js. The optimized and minified version is available at dest/javascript/collapses.min.js.

Usage

In order to set up a collapse, the basic markup is right below :

toggle show hide

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<a data-collapse="toggle" data-href="#collapse-ex-1">toggle</a>
<a data-collapse="show" data-href="#collapse-ex-1">show</a>
<a data-collapse="hide" data-href="#collapse-ex-1">hide</a>

<div class="collapse" id="collapse-ex-1" data-flag="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

Javascript setup

In order to make it work you need to setup some javascript. You have two ways to make it work :

Javascript usage into html

<script src="./path/to/trowel-collapses/javascript/collapses.js"></script>

<script type="text/javascript">
  var collapses = new TrowelCollapses(document.querySelectorAll('[data-flag="collapse"]'));
</script>

Javascript usage with an import

import TrowelCollapses from './path/to/trowel-collapses/src/javascript/collapses';

const collapses = new TrowelCollapses(document.querySelectorAll('[data-flag="collapse"]'));

Accordions

An accordion is a group of collapses, one over the others :

accordion 1

accordion 2

accordion 3

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-2-1" data-activeclass="accordion__trigger--active">accordion 1</a>

  <div class="collapse accordion__collapse" id="collapse-ex-2-1" data-flag="collapse" data-state="visible">
    accordion 1
  </div>
</div>

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-2-2" data-activeclass="accordion__trigger--active">accordion 2</a>

  <div class="collapse accordion__collapse" id="collapse-ex-2-2" data-flag="collapse">
    accordion 2
  </div>
</div>

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-2-3" data-activeclass="accordion__trigger--active">accordion 3</a>

  <div class="collapse accordion__collapse" id="collapse-ex-2-3" data-flag="collapse">
    accordion 3
  </div>
</div>

The attribute [data-activeclass] on the trigger reference a class to add on this trigger, when the collapse referenced in the attribute [data-href] is visible.

Collapse groups

You can force an accordion to have only one .accordion__collapse opened by setting the attribute [data-group] with the same value for all the .accordion__collapse elements

accordion 1

accordion 2

accordion 3

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-3-1" data-activeclass="accordion__trigger--active">accordion 1</a>

  <div class="collapse accordion__collapse" id="collapse-ex-3-1" data-flag="collapse" data-group="tab-ex-3" data-state="visible">
    accordion 1
  </div>
</div>

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-3-2" data-activeclass="accordion__trigger--active">accordion 2</a>

  <div class="collapse accordion__collapse" id="collapse-ex-3-2" data-flag="collapse" data-group="tab-ex-3">
    accordion 2
  </div>
</div>

<div class="accordion">
  <a class="accordion__trigger" data-collapse="toggle" data-href="#collapse-ex-3-3" data-activeclass="accordion__trigger--active">accordion 3</a>

  <div class="collapse accordion__collapse" id="collapse-ex-3-3" data-flag="collapse" data-group="tab-ex-3">
    accordion 3
  </div>
</div>

Tabs

Tabs use the same concepts seen before, but with a different markup :

tab 1

tab 2

tab 3

<ul class="tabs-nav">
  <li class="tabs-nav__item">
    <a class="tabs-nav__anchor" data-collapse="show" data-href="#collapse-ex-4-1" data-activeclass="tabs-nav__anchor--active">tab 1</a>
  </li>

  <li class="tabs-nav__item">
    <a class="tabs-nav__anchor" data-collapse="show" data-href="#collapse-ex-4-2" data-activeclass="tabs-nav__anchor--active">tab 2</a>
  </li>

  <li class="tabs-nav__item">
    <a class="tabs-nav__anchor" data-collapse="show" data-href="#collapse-ex-4-3" data-activeclass="tabs-nav__anchor--active">tab 3</a>
  </li>
</ul>

<div class="tabs-collapses">
  <div class="collapse" id="collapse-ex-4-1" data-flag="collapse" data-group="tab-ex-4" data-state="visible">
    tab 1
  </div>

  <div class="collapse" id="collapse-ex-4-2" data-flag="collapse" data-group="tab-ex-4">
    tab 2
  </div>

  <div class="collapse" id="collapse-ex-4-3" data-flag="collapse" data-group="tab-ex-4">
    tab 3
  </div>
</div>

Sass reference

Syntax variables

You can override the global syntax config for a specific component with the following variables

VARIABLE	DEFAULT VALUE	DESCRIPTION
`$collapses--syntax`	`null`	syntax config for `.collapse`
`$accordions--syntax`	`null`	syntax config for `.accordion`
`$tabs--syntax`	`null`	syntax config for `.tab`

Enables

You can avoid the generation of some css with the following variables

VARIABLE	DEFAULT VALUE	DESCRIPTION
`$accordions--enabled`	`true`	enable the generation of rules for accordion component
`$tabs--enabled`	`true`	enable the generation of rules for tab component

Component variables

VARIABLE	DEFAULT VALUE	DESCRIPTION
`$collapses--font-size`	`1rem`	sets the font-size property
`$collapses--font-family`	`null`	sets the font-family property
`$collapses--font-weight`	`null`	sets the font-weight property
`$collapses--text-transform`	`null`	sets the text-transform property
`$collapses--letter-spacing`	`null`	sets the letter-spacing property
`$collapses--line-height`	`null`	sets the line-height property
`$collapses--text-align`	`null`	sets the text-align property
`$collapses--text-decoration`	`null`	sets the text-decoration property
`$collapses--margin`	`null`	sets the margin property
`$collapses--border-width`	`null`	sets the border-width property
`$collapses--border-style`	`null`	sets the border-style property
`$collapses--border-color`	`null`	sets the border-color property
`$collapses--border-radius`	`null`	sets the border-radius property
`$collapses--color`	`null`	sets the color property
`$collapses--box-shadow`	`null`	sets the box-shadow property
`$collapses--background`	`null`	sets the background property
`$collapses--background-color`	`null`	sets the background-color property

Accordions

VARIABLE	DEFAULT VALUE	DESCRIPTION
`$accordions--font-size`	`1rem`	sets the font-size property
`$accordions--font-family`	`'Open Sans', verdana, sans-serif`	sets the font-family property
`$accordions--font-weight`	`null`	sets the font-weight property
`$accordions--text-transform`	`null`	sets the text-transform property
`$accordions--letter-spacing`	`null`	sets the letter-spacing property
`$accordions--line-height`	`null`	sets the line-height property
`$accordions--text-align`	`null`	sets the text-align property
`$accordions--text-decoration`	`null`	sets the text-decoration property
`$accordions--margin`	`0.5em 0`	sets the margin property
`$accordions--border-width`	`1px`	sets the border-width property
`$accordions--border-style`	`solid`	sets the border-style property
`$accordions--border-color`	`rgb(207, 207, 213)`	sets the border-color property
`$accordions--border-radius`	`0.2em`	sets the border-radius property
`$accordions--color`	`null`	sets the color property
`$accordions--box-shadow`	`null`	sets the box-shadow property
`$accordions--background`	`null`	sets the background property
`$accordions--background-color`	`null`	sets the background-color property
`$accordions--padding-x`	`null`	sets the left and right padding properties
`$accordions--padding-y`	`null`	sets the top and bottom padding properties
Anchors
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$accordions-anchor--font-size`	`null`	sets the font-size property for `.accordion__anchor`
`$accordions-anchor--font-family`	`null`	sets the font-family property for `.accordion__anchor`
`$accordions-anchor--font-weight`	`null`	sets the font-weight property for `.accordion__anchor`
`$accordions-anchor--text-transform`	`null`	sets the text-transform property for `.accordion__anchor`
`$accordions-anchor--letter-spacing`	`null`	sets the letter-spacing property for `.accordion__anchor`
`$accordions-anchor--line-height`	`null`	sets the line-height property for `.accordion__anchor`
`$accordions-anchor--text-align`	`null`	sets the text-align property for `.accordion__anchor`
`$accordions-anchor--text-decoration`	`null`	sets the text-decoration property for `.accordion__anchor`
`$accordions-anchor--margin`	`null`	sets the margin property for `.accordion__anchor`
`$accordions-anchor--border-width`	`null`	sets the border-width property for `.accordion__anchor`
`$accordions-anchor--border-style`	`null`	sets the border-style property for `.accordion__anchor`
`$accordions-anchor--border-color`	`null`	sets the border-color property for `.accordion__anchor`
`$accordions-anchor--border-radius`	`null`	sets the border-radius property for `.accordion__anchor`
`$accordions-anchor--color`	`rgb(255, 255, 255)`	sets the color property for `.accordion__anchor`
`$accordions-anchor--box-shadow`	`null`	sets the box-shadow property for `.accordion__anchor`
`$accordions-anchor--background`	`null`	sets the background property for `.accordion__anchor`
`$accordions-anchor--background-color`	`( 'default': rgb(31, 13, 51), ':hover': lighten(rgb(31, 13, 51), 5%), ':active': lighten(rgb(31, 13, 51), 5%), ':focus': lighten(rgb(31, 13, 51), 5%), '~active': ( 'default': , ':hover': lighten(rgb(253, 65, 100), 5%), ':active': lighten(rgb(253, 65, 100), 5%), ':focus': lighten(rgb(253, 65, 100), 5%), ) )`	sets the background-color property for `.accordion__anchor`
`$accordions-anchor--padding-x`	`1.65em`	sets the left and right padding properties for `.accordion__anchor`
`$accordions-anchor--padding-y`	`0.65em`	sets the top and bottom padding properties for `.accordion__anchor`
Collapses
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$accordion-collapse--font-size`	`null`	sets the font-size property for `.accordion__collapse`
`$accordion-collapse--font-family`	`null`	sets the font-family property for `.accordion__collapse`
`$accordion-collapse--font-weight`	`null`	sets the font-weight property for `.accordion__collapse`
`$accordion-collapse--text-transform`	`null`	sets the text-transform property for `.accordion__collapse`
`$accordion-collapse--letter-spacing`	`null`	sets the letter-spacing property for `.accordion__collapse`
`$accordion-collapse--line-height`	`null`	sets the line-height property for `.accordion__collapse`
`$accordion-collapse--text-align`	`null`	sets the text-align property for `.accordion__collapse`
`$accordion-collapse--text-decoration`	`null`	sets the text-decoration property for `.accordion__collapse`
`$accordion-collapse--margin`	`null`	sets the margin property for `.accordion__collapse`
`$accordion-collapse--border-width`	`null`	sets the border-width property for `.accordion__collapse`
`$accordion-collapse--border-style`	`null`	sets the border-style property for `.accordion__collapse`
`$accordion-collapse--border-color`	`null`	sets the border-color property for `.accordion__collapse`
`$accordion-collapse--border-radius`	`null`	sets the border-radius property for `.accordion__collapse`
`$accordion-collapse--color`	`null`	sets the color property for `.accordion__collapse`
`$accordion-collapse--box-shadow`	`null`	sets the box-shadow property for `.accordion__collapse`
`$accordion-collapse--background`	`null`	sets the background property for `.accordion__collapse`
`$accordion-collapse--background-color`	`null`	sets the background-color property for `.accordion__collapse`
`$accordion-collapse--padding-x`	`1.65em`	sets the left and right padding properties for `.accordion__collapse`
`$accordion-collapse--padding-y`	`0.65em`	sets the top and bottom padding properties for `.accordion__collapse`

Tabs

Tab navs
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$tabsnavs--font-size`	`1rem`	sets the font-size property for `.tab-nav`
`$tabsnavs--font-family`	`'Open Sans', verdana, sans-serif`	sets the font-family property for `.tab-nav`
`$tabsnavs--font-weight`	`null`	sets the font-weight property for `.tab-nav`
`$tabsnavs--text-transform`	`null`	sets the text-transform property for `.tab-nav`
`$tabsnavs--letter-spacing`	`null`	sets the letter-spacing property for `.tab-nav`
`$tabsnavs--line-height`	`null`	sets the line-height property for `.tab-nav`
`$tabsnavs--text-align`	`null`	sets the text-align property for `.tab-nav`
`$tabsnavs--text-decoration`	`null`	sets the text-decoration property for `.tab-nav`
`$tabsnavs--margin`	`null`	sets the margin property for `.tab-nav`
`$tabsnavs--border-width`	`null`	sets the border-width property for `.tab-nav`
`$tabsnavs--border-style`	`null`	sets the border-style property for `.tab-nav`
`$tabsnavs--border-color`	`null`	sets the border-color property for `.tab-nav`
`$tabsnavs--border-radius`	`null`	sets the border-radius property for `.tab-nav`
`$tabsnavs--color`	`null`	sets the color property for `.tab-nav`
`$tabsnavs--box-shadow`	`null`	sets the box-shadow property for `.tab-nav`
`$tabsnavs--background`	`null`	sets the background property for `.tab-nav`
`$tabsnavs--background-color`	`rgb(31, 13, 51)`	sets the background-color property for `.tab-nav`
`$tabsnavs--padding`	`0.65em (1.65em / 2) 0`	sets the padding property for `.tab-nav`
Tab navs item
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$tabsnavs-item--gutter`	`1em`	sets the pod property for `.tab-nav`
Tab navs item
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$tabsnavs-anchor--font-size`	`null`	sets the font-size property for `.tab-nav`
`$tabsnavs-anchor--font-family`	`null`	sets the font-family property for `.tab-nav`
`$tabsnavs-anchor--font-weight`	`null`	sets the font-weight property for `.tab-nav`
`$tabsnavs-anchor--text-transform`	`null`	sets the text-transform property for `.tab-nav`
`$tabsnavs-anchor--letter-spacing`	`null`	sets the letter-spacing property for `.tab-nav`
`$tabsnavs-anchor--line-height`	`null`	sets the line-height property for `.tab-nav`
`$tabsnavs-anchor--text-align`	`null`	sets the text-align property for `.tab-nav`
`$tabsnavs-anchor--text-decoration`	`null`	sets the text-decoration property for `.tab-nav`
`$tabsnavs-anchor--margin`	`null`	sets the margin property for `.tab-nav`
`$tabsnavs-anchor--border-width`	`null`	sets the border-width property for `.tab-nav`
`$tabsnavs-anchor--border-style`	`null`	sets the border-style property for `.tab-nav`
`$tabsnavs-anchor--border-color`	`null`	sets the border-color property for `.tab-nav`
`$tabsnavs-anchor--border-radius`	`0.2em 0.2em`	sets the border-radius property for `.tab-nav`
`$tabsnavs-anchor--padding`	`0.65em (1.65em / 2)`	sets the padding property for `.tab-nav`
`$tabsnavs-anchor--color`	`( 'default': rgb(255, 255, 255), '~active': rgb(31, 13, 51), )`	sets the color property for `.tab-nav`
`$tabsnavs-anchor--background-color`	`null`	sets the background-color property for `.tab-nav`
`$tabsnavs-anchor--background`	`( '~active': rgb(255, 255, 255), )`	sets the background property for `.tab-nav`
`$tabsnavs-anchor--box-shadow`	`null`	sets the box-shadow property for `.tab-nav`
Tab collapses
VARIABLE	DEFAULT VALUE	DESCRIPTION
`$tabscollapses--font-size`	`1rem`	sets the font-size property for `.tab-collapse`
`$tabscollapses--font-family`	`'Open Sans', verdana, sans-serif`	sets the font-family property for `.tab-collapse`
`$tabscollapses--font-weight`	`null`	sets the font-weight property for `.tab-collapse`
`$tabscollapses--text-transform`	`null`	sets the text-transform property for `.tab-collapse`
`$tabscollapses--letter-spacing`	`null`	sets the letter-spacing property for `.tab-collapse`
`$tabscollapses--line-height`	`null`	sets the line-height property for `.tab-collapse`
`$tabscollapses--text-align`	`null`	sets the text-align property for `.tab-collapse`
`$tabscollapses--text-decoration`	`null`	sets the text-decoration property for `.tab-collapse`
`$tabscollapses--margin`	`null`	sets the margin property for `.tab-collapse`
`$tabscollapses--border-width`	`null`	sets the border-width property for `.tab-collapse`
`$tabscollapses--border-style`	`null`	sets the border-style property for `.tab-collapse`
`$tabscollapses--border-color`	`null`	sets the border-color property for `.tab-collapse`
`$tabscollapses--border-radius`	`null`	sets the border-radius property for `.tab-collapse`
`$tabscollapses--color`	`null`	sets the color property for `.tab-collapse`
`$tabscollapses--box-shadow`	`null`	sets the box-shadow property for `.tab-collapse`
`$tabscollapses--background`	`null`	sets the background property for `.tab-collapse`
`$tabscollapses--background-color`	`null`	sets the background-color property for `.tab-collapse`
`$tabscollapses--padding`	`0.65em 0`	sets the padding property for `.tab-collapse`