Collapses

Star
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 1
accordion 2
accordion 2
accordion 3
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 1
accordion 2
accordion 2
accordion 3
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