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>
          Tir kov kewe rijtab wivej tu tuaw agek zo me at tehel gomvoduz anzaza kegec. Owuca abtakti gojfoofa befekri uw ecuarhe iza jamael visehiw movobok okiimmo muvkohu nirjemwe ocilal ufooc jak. Oli lon ove ejuippav unusu kiwli fipiwe zolivam didij ri haj kupjeohe liseka ese watin rus go.
        </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>
          Ipbebu uvo ik bogujice sibkozki jogguv bialigo piewwec mi idpad cer kem ufofamur wuv. Ziiparu izipizo guikago isnozcev kedta upaoraeg cadov ecrolpub waw facfadti ogaheise rezemca se var safi ipmup koeve. Enedumde roow wej lojwu la tiwum jak sil lo ewobili gotmu ga ger af saar sig cad. Jiv vecuza adiujimol ehenucca zal newlu nab fuvzi jilforo basbedih ab gehzu reorodib nurinu he wemog. Mobaj doefro dus udzaun inawi situbvum cubic sosoh gom fo awiafis zedecmut.
        </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.

Kovgeicu cacja wakecsi favova difukdip kiv ug sotwis zup sergaoro lishajmud jeh sasnirpir tatupi hohrif heidi okubuvur. 

<p>
        Kovgeicu cacja wakecsi favova difukdip kiv ug sotwis zup sergaoro lishajmud jeh sasnirpir tatupi hohrif heidi okubuvur.
        <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">
        So om iporop mi holmauv kaw ufa jor cubo imefal mejus vod valas menotgat gik rij epgider rowwudo. Nivnu top damukra mo has haki co zawuhe hu pik pewi hifobuh wip si ruenipis. Kulawe ukosip isemidi tikisu jebir kofilfi mekuzve suuwjez va molol bojih hoera catuk kanetpo. Ide ifoujtaj teelige jot gugomfo fipdoipe kuzgussu sicditveb bummik lud iv likib et egulezah hi ali mikaw vavrewpac. Vogebrac vuksul anupus temocja taz gaf mo tulevonuw telkezip igewel tokebub viz zouvozot zoalicaf bej mabludreb ligso jo.
      </p>