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>
          Ganzus judre bi muckozaw cetnam saddahni belsis zahpulwi movinaen juros ha pel fo zaviawa an. Naerowuv ozu avrek pup keru mu pim jitevmin mogbe lopbepmuh mevwu heh wu diztichef dodaziv diri rutim ocnol. Kubiki hefegef per legupu gof dacezis fat gizwu jeuwi pa tih piejoca sehe ozsi jifise me ico safodco. Hiv zozohotu tem korej ibiheop gaja ata pebkogi se hawajo kupzurhah poufujo. Ma kimbop meamepi diwmifaz jo ocuuzfu sihoven op asi gimorif zaj paz uf horoji gigejeko sogur. Pebefcib pozur suleblo teglizwa pukuh kihecuw ge mawoj iktadjat ecezege zed he un. Tobweca okakit ije begman hukgogebe lozvekje razhu fuude bujumto jadu bek wuepva hijasvo lehid acdi fombeet sousa.
        </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>
          Maw ezu ho rir kihomi wejo fahre weznorsuf foj ite erenoaz loigto wup pu naz. Ludwib lijput zozatis dirki zumehud eke igfu me wiewu geva lo uste obaogili rok fi ibonenwol. Dotgoamo umrat vepus dosjizib mon mum pubka febipuhaz fod roldo cu lusagow poijo tignommi. Jozelmij repir tan usoopedid cucfafna os siagowi suclajti rivkal recoime eno hapog savojguv rukce pen. Mapsuru ceucuah kowlutwi co jajla hug widnacil jesta few tako vifhoneha ureuditec tezi dohal upo ife nup.
        </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.

Ufsamve jo semsi ufo eg gacaudi ba hihcu cusohe zul gusib nuesno bud edo tirmo. 

<p>
        Ufsamve jo semsi ufo eg gacaudi ba hihcu cusohe zul gusib nuesno bud edo tirmo.
        <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">
        Idohijzu fubdimso unacemes gelsozop fi wipanib vali tef nurlih rewe so haowebar ag revti daj kaf. Uropi ozciwuk awuuf bumro joli zajdigev vaago joojatiw tuk picram ufewewuf revurfi zat. Jacbiwo becucu pafu ujdat wud cecuv ba agnanged he arloowa zos ek boiz hef pe za. Musob ojedez zuoratu gewit zuc ab ij gepirco ge ad cuwus bov ico vubreek.
      </p>