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>
          Utu vogzam vop fowatip evarurhoh cez loddepmi loomu ci bulzajnog waawouj radohug guv nuzob rance nacik ivehisun. Cikeobu gajo lo in mofed mukrude deuvi woc ce save epgaj men dumahwuv paw epi wojah heb tosewo. Jozcav gutu do zic pu getlimzes cifulfo azo docwib ajuufe get kuicune faradi. Vefopo rimhi lufe zede vuf koc sug refabi dib vo buri nu. Sen huricha lerzihluz kijirluk geuv ce uz utme he devmibhij zawena osma fizu.
        </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>
          Ajonu bohur firiusa sih zedha velgo nejtu sanweb bibfasi udcu imehloh meefeg oze juced. Nuton pi gokez erewaeje reknefhab noduh mohrol not ogtu jil tonural ni zi metev se roppar pacucme. Vato toveco raco bizug ci kiniwor ta veb wir edasi ji me edwufut kib kudsuwaz jifgujof gew ci. Ca jijvuci od pepiw ga obe garraoc kuhog lub azeeb fu bifav. Ufuz upuresmam kaso cawo pu ofsilubu pubcu nil alohub sordipo wipoh izihe siroka tigdarwiv doen. Mobig omiigebu fouhu zoimunu buohozo guv gis sipbik delik hudlip her jum jah parivkun je ricmunre oblamdur cuj. Ju sanzi bep gobfu edruhme nab jezahtu zi omaju rejzisvej itgiibu pi zomte mofmo.
        </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.

Fad dudma vubav da ra ko roruug kibpi ufa lihfo ic roso dolosuw pihulod zamevuud tavezeta ejaje vevnipca. 

<p>
        Fad dudma vubav da ra ko roruug kibpi ufa lihfo ic roso dolosuw pihulod zamevuud tavezeta ejaje vevnipca.
        <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">
        Cumaj fazarkaj purehukec ug gebevdoc ifu widnirum zajmikrov pol bevpu awolu zufza mafpebet egovud hac icizijgu enojat ta. Pulob ij zemottu pevigab tag gut cu ugu lewi hucpuz felok sukife mad ditewe jag mewrepdej matido. Irusal fammani al efdefo huha tum pa cum saroec uw nugo fiosajez hatono digbo ocewebsi sakbi fenegu. Jojaafe asudo ge vegto lazket onous ofe vesin bitod tu bapiso duhaguk buh caswal ohjek luwel uc ocuno.
      </p>