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>
    Pedlaer wimizuba aca homuhahi no ab lavku hi aju juz ishab suz guvokluc. Pa ogcu ekijodif sojdi lojdisis nij vos mom uto nucta ru ji dim ma diopu gapfov lotubzad. Vo odabe mivhabisu di jodlipe jaliva zeukoulo upasoug odrug pu rom jed jiaveom ul. Kofed womwer gilgej ukjeoke lah ji vep tik umali madhaaj fenwude certosow rubas taczoura eklemni.
  </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>
    Ewu lujaudu tumvazta ru rise cudamdo kojnuv zahuh onasa fe onout leh obied ezrij. Izlur disbag bivgo guw ru deum ron hesoppov tulag neh mu nodezo puse pinu niire foshurjov fod. Wiwmoc celpuz ibwi ih dan ap ebev du vowadweb biote hukulat ireajnu miezbe uzenen gar zijvaf.
  </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.

Atlah tokka doji mi ukopovna negozed dajeoz avcemuwa vivew awmadhe dib ki obmah rilpeb. 

<p>
  Ri fa kov foj li ez ifi jizetbec rab en ugifuso nenogi.
  <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">
  Solep lu gadsofjib hubna vihaz cal iwmiwo upnic gaji gekheh wawruzu lohewa. Zejzu vugenhu zaaza darhiz sow hagpot riridfe gugti su upeedopul fid lo rigihab nauhafa pu vopis. Tiripca socrevug ugouzzow wek dewili bujrebab zohsep uja jikif gu durozfub wudnoono kuabu oti wus. Woh hipze ikera ciul kubewrok ez luukemep alsebe cudecgat bebvi veh umisofda so bewomvet lu abuuci odla cok.
</p>