Collapse

Inspired by Bootstrap's similar component but differing in a few key ways, the Collapse component allows you to toggle the visibility of certain content chunks.

Usage

  • javascript

Adding the class of Collapse will enable basic functionality, where the element will hide or show based on the value of its aria-hidden attribute (true or false) or whether or not it is the :target.

Adding the class js-Collapse or calling $(element).collapse() will enable enhanced functionality with animation. Unlike Bootstrap's plugin, it will not automatically collapse the element to avoid conflicting with the intended aria-expanded state.

Any element with an aria-controls attribute mapping to the collapsible element's id will toggle its visibility on click. You can also use a link targeting the element's id, which will retain the basic functionality even when JavaScript fails to initialize.

If you need to programatically trigger opening and closing of collapses, you can access the underlying Collapse class as cpeToolkit.Collapse:

const myCollapse = new cpeToolkit.Collapse('.my-collapse');

myCollapse.open();
myCollapse.close();

Toggle Link

<p>
  <a class="Button" href="#id" aria-controls="id">
    Toggle Link
    <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon u-rotateOnExpand180">
  <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
  </a>
</p>

<div class="Collapse js-Collapse u-bgSilver u-pad1" aria-hidden="true" id="id">
  <p>
    Jo rat ve ininovid kuwa akogok cik co ensof ramcelibu nuwamed cugomaz fapsohros ebcod. Wup soubudap fe dicapi pebuk pinikuj lesserko lof hi onvobal dutve jevluvas huebo jeze. Niriphu erfig nevgoce ropes roel tu meej fiddi nasurifa tonazat ami daki ji ziwofse kenoze tepundi ahcuzal. Lu wehludew gacse viper okca lumrez ijanujmo nidatoz nelirokud totserwoc urapa ogago. Av hoj sisu uj goc atoob cog wodig nihalewo ke foz cosuf ris lerjuvo feplu bah.
  </p>
</div>

Do note that because the JavaScript component uses height animations by default, over-use may affect performance. You can disable animation for specific instances by including data-animate="false" on the Collapse element.

Don't animate

<p>
  <a class="Button" href="#demo-collapse-3" aria-controls="demo-collapse-3">
    Don't animate
    <svg width="16" height="16" viewBox="-9 -6 32 32" class="Icon">
  <polygon transform="rotate(90, 7, 10)" points="0,0 7,0 14,10 7,20 0,20 7,10"/>
</svg>
  </a>
</p>

<div class="Collapse js-Collapse u-bgSilver u-pad1" data-animate="false" aria-hidden="true" id="demo-collapse-3">
  <p>
    Leeve coisafos ru pucjise tugesjag jusdehpa ha aj vaewimes sogdugid usojegmej ewdontum vi sehuhu rat api muireilo. Nakocon firvahfi ol lidguf nonos we ruwuzlis ewe ofevecci hedu vavuse icuzes cihwi. Piuk gimca di dunorwiz aja punku didof tuvju taor dim ringeg zozerla sipoh be.
  </p>
</div>

You can specify a data-trigger-class option on the collapsible element to toggle a class on all trigger elements on expand. This is helpful for one-way expand/collapse elements, removing unnecessary elements after the trigger occurs.

Damdiga ne watvo wirwu diljungo lew pip fufe hanfe wedmuwuz vufko cugdojah.

<p>
  Umaju tomineeta darnose hiw wafejo nusakwi vozijuda ci nivcef jefurewa teedat ajifwe tu uticuron jig duv.
  <a href="#demo-more" aria-controls="data-more" aria-expanded="false">
    Read more…
  </a>
</p>
<p class="Collapse js-Collapse" data-trigger-class="u-hidden" aria-hidden="true" id="demo-more">
  Ci zih fegaabe om sevuzgo muikabeb aceka juzodi gi pu kamiki laakdor tawdim. Corcego loz deodpep luspeogi nibfufjiw ozo habhikow cutidir kuz wovodguv guohwa ko tu ev bol aralarop hej cubgirut. Vu lutru joja pulel fettozci hag zablo zecibbo pifalko kivif parnevna uka sazo abula. Jine injodkac imige dignuogi tutsal ifu pacunav navi afeupi ehi kuldira lumgoh. Cobihfu puopi fuvohu pamjus gajkif vavijab figtubob faka ti ega dog ta mowivwop apezo avukeze menwivu jase paradedi. Avmad li fipot nab rel gasikuhu beh impaf fim possa wuhtadun kekozvot bus.
</p>