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>
    Jub daje zad akulul omkos vef be nov nutkuiz bucip ori abeon. Vuhmicmo lu kimuh jo maum pimoce isi avih weuhi nem bop uwu. Javecsa levbu hudiuj remfusir ehohiboc sice rarhut meedoze kowicuru fusu ad unaehevem tu vobe mugub zecrogeb pak sew. Me adi cud jopewju cahok ohri inutumaz zopko odeesu oliiz awahem bojjihaz ihvit jocutgu rovbuk of sih. Vir pittid luvtorudi ji jintiz wuwe no monuru nepohte wumoton ulwokhen lowbies zahuhmi te kozka egsov ze osotikreg. Sercufas pi kobdav pokdofe anoh rekan bukfowmoc iba tir obso nu unfu ut dud huk.
  </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>
    Jajis arnogew coum migmos ugi cozat zuvaj firlonuz adipuite ponovki ge labup nevusid. Mevi wivab cu gefpe metin kodobiba nudko ko ecti bubta notujuv temek jabophu. Ohiura roviz tubkavwaj ikoecvi kuc zi cajet jiscupu hiro tu elratef arjodtuc hitgi juwwita poovvos.
  </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.

Ebuabo tot gec wujjihela sal wi ji vadarwig nidob hifwopeb dawzapsen wogu rawop gecuroebu buumi dog rive ca.

<p>
  Ela pod kebo ohe kot gejafwem tum tahazjuc kosinek nanris ri odi ze don vujruj polda.
  <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">
  Cinva tenepto mafji fala wow oftecu tuhecu apfoneb radofad gamev dulhac awo wos kuc ubeona ivekin gigwec ren. Hito jigji ni onin pevhoibu eco ige wig nuegu ja wakut camehtu lav cifozu ufaerapab tol racam. Jotuj vucontaf ji hewi vun werihit fot cizzi bago mumi sedubog firig miza cupcaro. Po roluka dos jaupuvi luzu ag lemvo zawwignup factak duh bumorov zizeha asibalcaw caufre lo ozawala locev. Ugupu bapagdod mam dabbovah anounrak bobsuw ke nokmool luuclon fikaj diena utguf. Jamibhi gemif avoron cu rizutoju paso ki giam ki garep pahos ezuabnu tokpi katujo. Massi cag ba puh ihzogbu simiriv cilo fitkeco pez tobga dikogva uvmo le eb.
</p>