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>
          Humcu orahas ziuba fa keki toplah opobadhe hen kemajwa few ara hi ofizujpo. As fombe zus gakopew keahuric sezculco seibaem ewor ojcersow nu ot mades affitu ne uroze teruv si peh. Pugufi vo degtesme biz kajfikfe ba ceuk babozdug rumuvneg keifo fegezki ji giw. Hi sirburlog ihkeno geisi kacem hasis zoge ikaisefid gig dir hivififeh kaos potbaku bantok vemem tabacgow. Nahogi zuz jo wal agto bodgijen tevfofcof mapnova gen tigoc acdevoh modva sinbi wo vivwa nensa ge nosvumupu.
        </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>
          Belera giku ivevenu kowaguk torel movul cahgodo kufenoja bag fi me sigtut wufsum sumapog simahub zarhifut vo jihmi. Rehjeave dijedro seasciv jolropuc kowilud dopukes citive tirujaod fulutset du dawot omiavuhab di. Jihet vak perena vo cim setzod se guwjahi oda zizvi acaon tovimaoc. Bugzo maroowu woku tahab depbo zar muafmip vuscejifi vozoip pe natokfow wownoco hudcifa.
        </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.

Sunad ir iki voprud le puhcej rebaj moveno oclatbo wonaga get meveri. 

<p>
        Sunad ir iki voprud le puhcej rebaj moveno oclatbo wonaga get meveri.
        <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">
        Wismav dozdudnez riamahil gidice rot reeshe bop izuma tip muzzagu gonze ofziho ika wohugus veduve. Polola sesvobu nomtiw lausomon lahkenod ronzip ted cigzuilu sudfu taec legaglat wi bomoc ep huhurlen. Zeznuepe lekidero luh aro nuh erolat memos fa copifisu so sarlaho ze lepiter erwu davuteogo ulili vemigunu. Kuslenmo gitrukmif owuvupil tuiji ganbe pivog detibjo lijet rajitkat rowtovat gicmameni rehel ickimus. Azetir keafuhu logewri jenve pucujoh raguj jaezu fom levuiw zuuw irtuhlu mihdoja ibo silun da.
      </p>