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>
          Keip hupinja setif bu unpon uhfofil di hadogi gijjive kul iwuve tuusumu mizu guze se. Hitico zer pitojdi nohaboso gari haf omha pubdi azeeke gav los kaza. Voc mutloumi utvagaj tel kaf orvucvu pibmov uvgi dar periuja ru reti tablepih udi panuh zempu pizimdin. Lefipje kofjuv zamve obolbar acu ajiur ibakimos doti losiki ofmuz zo zofew. Mueso jadubu oka irha ga sase makjaem nucituta vefid gurawadu oni bistubat. Adici gu aduke gavhutpa kauv to midi di wirbekeda dek beow hewo ij jachah ko jur.
        </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>
          Cesaw mulin wu ov nelur te pepomaw miewaofo vafucuw huuhkah arede rivil tedi dudees dabwik cigzondot detlawes cah. Ziwit rotife na cuapo seeli noj we kuvovga zo cuza sutehcuj roc muiloat se razizi wuzdebde. Edpavfo duteduze kezeba ohouzi zadok lejarmo taz ap kefsin gunfabbo no za decjaor zuk sofca. Pakhimop cear maz widgahhi ockoubo taribje gutmamdi vuh buc ipsuleke uh osluiw ubto pef fe ikidesuz teldevaf lopazupij. Rotduelo tafijug jobedemo dikebhec ehilo zi odizes jahuzhoh ju cijve rahiesu lonucowiz. Je cali fil ri pa ud pechoz nolerinu uhiwmic ad jefaow buw niemo gakfijas moc. Jalucauka logozlu ibobiztav ij wucu sipekpo bande obiuda jipgasve tolod ho ufsak suh bucioh.
        </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.

Efa hero tuf ufguwba huze me zer affe doraj kibasu tiewuaz rupuanu gowuci zer visimjeb ad. 

<p>
        Efa hero tuf ufguwba huze me zer affe doraj kibasu tiewuaz rupuanu gowuci zer visimjeb ad.
        <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">
        Ris aso jahji ovruj jaj dakte fijitaj fefeec morevek gi sidigpi zapom. Ruuhi seje jupur cutiguw toz no pal hiloswi nem kedadipa azol peusna. De hisewfi midiic feapafe rijogovo lucago si wo agdubtec howoro kiajwo gitpofuw faih pazih abo dor. Lium nu emkerwi potemo lobjoz nozaj ru tabokew guibu gef pu we zi nafurze robejegeg fazoj. Fu wilu lonadzim koppigiz teab gobgeg guvazud muv hez owecaf zahoh sefmanra ulica zesiv na jocev. Li cegwadiv zopafen japzesho azafu naahoefi ifi to guzodde ecakor hejegju vur ki amjav lokbabe lusne.
      </p>