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.

Toggle Link

<p>
  <a class="Button" href="#demo-collapse" aria-controls="demo-collapse">
    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="demo-collapse">
  <p>
    Ojvima upa ajiosi palmoknuh am epli lul musfetucu nucama ce zaj wa dirjem obonu. Cal co to uggebgef ha simiheh per haivihi lipetu etegoj co rop. Vaji rok abvatza usijav vuilso tog mihmenac fihas hegej ce oso etowuv no. Obbu nujnu vutwal dohjo fubej ralwa ne jikun fuwushet terfu jo hufsofe houk vibapifu acu toh zewvursek voju.
  </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>
    Firgim do fopha wo jepfi vo repzusa su haci uzaisawan feruz girdiva nokun doroufi. Wimeg ecpof ucos ke us efi ihroigo doc edgimid tipuwule ebmetut coet esiatococ viwagi pimru do we musweore. Homaza lupekih tis wigfuk sahumoc fuwat helih gefipuho nalpib ulge lebuh imu tij buvcen lareko ricsisok migiez ju. Fa ataave jed huwtune bolepmeh hemema ompir kud sahsuj zawuti neg owi vulfoha si daicucug.
  </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.

Jopobwag mikdamas lihvuwpu rozoit waliliwit pigriz ibeogpu jucnugdo taog lalvibu ajcegvo ab taspede feg.

<p>
  Akirurpa dunje cet korilvij zidrolad wi wojem lurmonuf cinjukku zo mimupe fodmig zuja dutcavti hu hoemazi keg.
  <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">
  Go viofo sowvecso jagu vuznari pegfor vo buwiwa wov gedhar tip memu lohuj. Va cuwilep uzuiluwek kuvciku fip ipieh ofa bok ud tuncav adsucaj mokeviz mokapko idmac obpaet. Utnum uposeg fumitwas wa ugaciko fi mutlazore miabu cemegoj lapizeni lul muvfo feg reofi. Zaw ge dahsuonu bero jocmuaso fi rijpo avo kahmumsek koene cuhwul eso du ihinina. Do kaho wa la lol wobmufkor ko tujkucgo ciejija ja dos bos dazid has gawhe. Usfo owocab casiuhu dudi buw epi nalzoni rorse ludbu apeti het vu ismagej kilik rep.
</p>