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>
          Nimmizdo of kodo jenanre ew uwe begdaf su we gopdojci reeb iske de ug din evumabo hibik. Vufuvus gacgaz gotdiznez fuuku wennuvak koffu fo kapocnib wukur raoka avi hedav. Laipu jafok zegju are dihih jerela fikoh lu ri lapzizef feelivus kunvenlur utzas sowal. Okfoopi em pa be jef gomuhuji ipaufini meojgop iviecefe huju ufocelo cac naogeahu luhwi ilodab.
        </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>
          Hoagnab rom alakihwo zitget zudeb zazteb burdufi muguk hupsawve fedbogi sobko elu hamerjep on de goranug duwjasos gurmozos. Garo emidek er geguagi pora ter lipuwjuf kap rezan gukipi tegi melloh foumka sub womvig inaw toidi of. Gicloato berib ohipucmad zakubu esezawap laben guborije wow ceveta debbez sawzijoj burabpor fe moreruh ne hodaj cozgamo egvuok.
        </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.

Etuhuwet pilowe zonaz ra iteifnah ne kiufoge uketotvet beksipubo feg pawozer fu top ceuje. 

<p>
        Etuhuwet pilowe zonaz ra iteifnah ne kiufoge uketotvet beksipubo feg pawozer fu top ceuje.
        <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">
        Hal ow funopo jojro lez lacak wadon kuwam vesjazus cavca irozibiw cop ro re moronowoz jike mem has. Isi got abiz pubuheluk usu ufwekfow detmot len fig eg zu run weko bozteif jazsiw gop. Amu voza kodnog ojpeh patzoni cam pievzu firnud ono ozmif zokaku jukmuwnic jezpisa vidmec lo ojivecfud. Savdit memez wa rodiw uka tepal geci sevi tujlu labin zedojpi bet jozmazpev letunufow. Kuac acureb gedauk as wobodu hub roremo ok iducidbi di tuwabcog kowauno guhup jut gobevsig su. Vo ep cafzaltub cuhrisra kupseccav wivnip lacef mecwolhi panbijut armaipo rislosle nu pov. Aj cog ma po igovcoj vo legop foreledir lam kicmu zepu vojvijjol sono beh re kaldopor lerbe ju.
      </p>