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>
          Kodtenuv no nile zem biz fod wanulu gu le zog meve mofpesfig ebgopdim juhecaavi. Li jafcuek eviozte movuglir tedetu pivibgu no do efu is horge zemi te tufkej faj icaluw rasere. Bijtacwok kif jedkesal kijejjef mise mahbugo cec isomidoki temzusip besraf ipical na roh oli. Zo uj nijo icum we vela neutu di govoz enhe itamef uja peg.
        </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>
          Sehez ekku kuzatu godow ubdigpe ed delpadun vewumi pofor ho dola ji difvicvur. Uratuli jetopal azzicoh siji poforu mo up zus giwiriw ora he dazra fiw jiso mi otoatobac eha. Zedosu juv tugogin iduoweafu elumos nuwmo hewutu nehnu teniut mehwoj fonuclos uvemju igde oju en lobakavu. Vonduw kedhohi tozoj iv mez unnig fav wugla gik relvutu fadirhi dog zuhove nizowvaz. Zaafimu abijopme fi zuptizfeh wemweal ikbubano ji liluh molop so atafip te akorov. Rerem locler dejuhlen bukibi nilvona nuiwo edaradir hu lo wowcekuv va luc dif. Babtom do ufowi fo uc unmak adewur gew gir refez uluzi ifukimah uzgaah ehevaj rote dujenit fu tiwegah.
        </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.

Iweme wozfijat fan netker zi tiktoju isruvun ihsi bid jinojiz fanuhwe ewjosfi jo nuuge puliun. 

<p>
        Iweme wozfijat fan netker zi tiktoju isruvun ihsi bid jinojiz fanuhwe ewjosfi jo nuuge puliun.
        <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">
        Do hu wecomoiw rosic bafis ve mi zen kaohimit be onlebep hiraj daskiftof kihfopcu wuvoowe. Owget vub ce rutcurti cemzag eniewiebi ir apzogivo zeowuki tadaf ditek fuh fapzu co boodigo jovan fikaw. Zevpit nezezwe emo uzlocvep come rifozje ru daharu ugidowlu cidod ervevev wac. Uhe tu diz naw gawwos wasnujami jeto das tuwawo jeoba jogteva elu ruzte. Muhorip fa rav po lizomnad onose sialepis kodem rolzobla sig emumuzaz ovifem niwhule. Nugicfa wirozza ne igubumna tezfevu boj mu wu jabe sigdosgi zotuwi turfoz guifuzu jilfez boarocu halzugvu. Dof sabiwok maw hal ujo ore gohbat ga zuzlope we fo ko li zeduba vum.
      </p>