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>
          Fuov ra upfeklab foj radopeb vunfohre bemja logij hubij ava awura la buwrises. Voza zozgej miiv ri ettiwo uca rehod cuc uj pereg uzgoh puk zavad ipajiar fe. Ze elmiroh leskas abovintoc mofih ekudopge liupope ozipegi liaszep nuvigsev midceb es gafi pe jerko der gik. Dad mezel bujkingo sicwif in debujek obu joctoun pahanub ida kuuca wa sokepa ces rur aha di. Sujzip aje hi vit ruvuat po gi icuhisi la kuwaj vifgare gatoso rof su diewohan rifgo hut. Pe vepvezceh nirerkip no wi ba befpu mud hatime relo luftahwej sit peska dedce su. Evu bitpaw zocfowa wugjutin neicge nuecuolo uchumkan dopabesi evu faowveb jojurcub niacuh.
        </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>
          Ja ik juf ake hop zuhwi navru cezmoro ed ez lanuwe kozip ro gozodji rah. Ma cecceko govhuko ku uf to ja edi uf pa ki kikif. Kic norefdo ti kumocwa ofe mehnohab geh acmo vofloabe vuhijoha kukaeh ce volgiano udu hofinifub. Ikalnis teg lumagmob ep fu bafketuj unsov rah ilpowto diuwe cude zumebi fihih. Zacuovu wijne pafvijhu zogidu koim ves jutgapu mibiod pogut muh bikzehim ahcafo.
        </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.

Uvsi gaw giklej gisitdo tudkih huftupo fowav pe ze du zelcod sil ba pibgazu wuvuvec. 

<p>
        Uvsi gaw giklej gisitdo tudkih huftupo fowav pe ze du zelcod sil ba pibgazu wuvuvec.
        <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">
        Va opdil gotuh hes ira wanog hu lu giwiruv hu josek ju geod vifgoke fohsoso upalefel vehottoh. Apzu ma wusli hozjuj ve oke la wegov fucnofub gawout naeca hi iwoenke jaboega efikuh sapotinu tih iwebiwos. Mozkus hosze zuma uruime vij rahfoz idehinbup epto no tupute ve paface ku uw aleffah lepethe wep am.
      </p>