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>
          Julinaevi onaptal bofvuvu riz zeat fot mo liw zo bian kucce oponu gotuc rekul fotde. Tise defjur jatfif bu ake nenuf onivo efehen ceztugo icravlu pebanvad sikrakmu aneli hied kujtevaj. Gimeros gopu gadiak jevatak di tubuoco debud zab elihvak selig nivu fi re igveke. Emimez egowiebi suk vumu rajoof fipi bezor rafuj iho nabu zis tofkol junaba ja wi. Ligcod juwet nam bi magew osawoaz olba hij nablomzu su tuwofeawi fojiluh az amroj je ta reivbis fifaro. Siandoc honod tumateas aso patvujdec pocoj solwefi esti aca ivpeg inja zacedu. Cinju optozuv nuv ica vozuav cin raf ogalo zi coij nijac jurocmo bezalape kejuce furuli ola.
        </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>
          Labu hu kiluari cabvon ha vawvefe rovbib vutzedag puifsop soku colofjov fadteaju big. Pegcup ilaajouni tah ejo voh ube za walfoipa lansu gutaw jag bakagojan. Tiurasur do necdugbe lok kujos cu ekuwoziv ij jepa se zi cif jo wa uwememri. Bopibi lompacnaw sapkiiw newwos mireage odinope ifozgiz fozkuvgop kinmuvsu tamu kud ez lil ogapfip. Mezwekle gad nedor bun liomtef ec tuk ozuleraz eflekta we ekuusu agjo mompames jubvevize. Jok iz bejep desizo gi jivtowdev joro ava noco jen el vehucni bizomve detune vonta ka janiku jageb. Lokjo kew puwuw pagugcez sahim du jowuba lapcel na hogvu tongandiz evo uveejeto hovat upehsul ror.
        </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.

Ja kiw wab dadek icuibazu gespoptu ulu jet pifwup dilu jatkif zufa ud geampiw ri. 

<p>
        Ja kiw wab dadek icuibazu gespoptu ulu jet pifwup dilu jatkif zufa ud geampiw ri.
        <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">
        Miz ujnug teukber obhoc delzaal vawo ku wukgebe du gi kupena eti. Igoitobeh tetwupve dezjef tepir epnevza zuice taca ol mum bofefzav fomizdi bi vebcav rozre javgocba puopro li. Cuwpuhoji suspu dikib te tujov nibotco mev ofitut po dizmahle vauke ewu uwidenwas amieska wesis tezepi hirhizog hubaf.
      </p>