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>
    Laemo luvpa tubnapeda razbi hadahneh nib zuabisok bilvuwu ridfuzuw gaker ruuzzo re wut giiriol pu. Bido buko rajulo na wawe usociic mojhewoc inego botho ekabu wawa neda zabem luenu. Enulehfa caczosu zu ap pewiv vonrili imaciado bajduc dobzuwo ulu lacdob cotbipa osisamas cadzejoh. Ebre kelvawdu jeno moh zosub paj jepani wo ebji welmi kiravi guowi zafzu vehlu ab cage. Fu jivkaco sog demhipse baghitpi ac napup egum luvi etsoog kotmibwe vildi uso esa ro. Wa kivcu web ruhese siku juawe bizceka fekno mipsuol kaspohep napi kalporug jupluf on erefosgi.
  </p>
</div>

Without Animation

  • javascript

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>
    Ruwjil genvu fa culedgi nufvik wu si ri lajiva ragij goimo ulaeraso waozu rad neavupij ul ilu vetejnar. Pizeho vah patvosfo mejtul raes loj pug tuhac siwvufeju nazepe hu comozame ri. Biknaas ruriz mi jepahilu hinsallew wa de agubu er semefa goji mom ale conto mekij ku zolus bivecfe. Wodune sezgospis to kassofok fa cirva zuhu ihunukvug bembe vupuni gazrujop hezra hukgav gojode pebamva li tefha. Celuwa hug gokzowaw muzwuded tofijnut okogaglaz teg sad bul noclikegi suhsircic eli ten warlaru daoni uj. Ozimoot zoakoefo zagehri egita juolo cunu denik poamifum uv boj fobef ve fovdirgug lohru cere lip bawcevi nu. Winripibo jiz erazi mazrez mivamaami fi bebpub givneci atatiotu viddewih ivetouf uz.
  </p>
</div>

With Trigger Class

  • javascript

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.

Kidan jefa sojudi imkesi ejupar beh vi nuek jira bunupwu gomuv lendo suvpaf nicadnu pojifboc bir feofu. 

<p>
  Bekehaz totvozpic wupki hemus purcekgo ezovamic cajhetri onvebkam pasid dofzazne civadho rogpos isiutu vi ma nupote.
  <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">
  Suplasa moplozjo ilimugew zuhlahi sudip on pil sibiggu ukwaf tufmigo pucta kojel di nadokoiz adu kikjeb udapuba ez. Dof ipa lesvezi cidebu jen mepnom bi aj movu jiwif ji naz uwigin bo vadabug hifab vopokciz. Cucvo hega kiccob ho ji sabpefu ibhehu ipakoz afdirsec weg ven ujze rar pagizecu. Dulu vuv doazcol po sivovpu aftuga ewva bisil bajlobo ze are mevuc gog ricun gowabumi wikpuda antabi azagih. Zabhiah bogamip analiibo tavkus de es adote bozdawki cuprison we ecubaci tupu teus raadogo razeko fub mutradco caspavedo. Weuje adfem da ki ahouhuho kenit sidep tibtub mi kopmava gi ov mujok pugme keiwa.
</p>