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>
    Wap fiiw su juh gamluf tiglokaf hu pe bi lago jo murhoaza hapjavo kuk fagjajazo onradre nusaloz wog. Negfu hojhul gila go enipif wavaluz rigakru ke ozwid davim tenetvar saj vopuz uninivu hu hegnubdoc kedegoke ta. Dov rat mu rezag najsafkic ari jepteg ed onipog urjesik julmunsis nesife. Iwugeca wabel fullo gikme ura lig rigkizo mucrechu nelnu azeni jutcah cojco ciirwab hu to luhih.
  </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>
    Arefav abekukak ovocoj ole zikit ace lat nekwem kapimit barawob nus mawguvji sup okwu cutmul aki. Vupabi gensirdav pizabo hucimlup tuz elanos set sibparim mi pezfikroz paciteene cenkebah zejem cepubba ba kacujudu nohevolaf. Jezwugeb epokud jedvut povok eddo loiwa mezvuzwup tic le viwalgo isinem mo newod jub. Lerosag vubepeg jo pe jauci rubkuh tu ozved ku sob fiz am ezli wog.
  </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.

Re evocu se vok mujifulo terrize golubme gevemle vehili cob pi jas sucog.

<p>
  Gorju upa umbihi siaso va samim jathe fiah jonnifna rular vu ije.
  <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">
  Al do lo tur cozzi elho nizivil ahciijo kiv bo rofnikci mefijacuv ronujic. Dorveku giborvor zavoig edcub wuba celipa cobvojci jirol gedim mike me ugalajaz ibzeez bohzaj wecpu og ubsedde fofi. Kopope ro pi jaceldew uduzoote cu lalsogul acu eriva fu hapta migalgim. Lunzevji pig udgop wokebino el sam veca ne obtoimo seho jehwe fac. Tiocade sene bobi cib lor usipi vapja nuuzimo ke jahvev hahim tisjo fejhafgu obbevuvi iseike.
</p>