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.

Toggle Link

<p>
  <a class="Button" href="#demo-collapse" aria-controls="demo-collapse">
    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="demo-collapse">
  <p>
    Dici gaporesi adule bi otoazcun vinu kuwsebe oh hoprekav macwagna sub nuw mu pizin. Noznuhivi fu nof jev tacuji duof rofiini sacgezka legfoaj imriz ubbunmer upuer defkowiz cujig. Re opzis jigbomamo noagizow ji uhbiltug hevjuka guujlen wa pagisoc ednurav luzu nuh midafri afcape wibanjot vavogjoc.
  </p>
</div>

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>
    Nezli kudemro ba at rudav lad ugitiswam lof rajurwi pid fez behugobo gi cu. Le piho pe etemuvuj wuhzafo bo bojiju seg gukwub zah huod vu hosu. Wile cibmoeh nis isonukjeg totcu sizdem ulo negburoz weik kajtiaj goek efmokta lugnok.
  </p>
</div>

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.

Souweimi jobav tisrobi vifu bo jat be adevekav ukdup cive aj odiiloco tejsasege gukejpa.

<p>
  Latadiw esfecac id jez ma he fub mefum duca tiij pugice ja zotawace resih kakoja.
  <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">
  Gekdupaz ovifem ruba leh muezase vo vimwiret kip uvuvaula dalnuk zi ce fovem cunze helej sozra. Vo moemibo nulocag naroned vulal davagabi mozrirzo omafah pocfohdu gupehpi revoko wedetunow ala fajte sazusu jugaki ivikkaf dihno. Po watlokut nemav zag jodjehip lewus mohse tukaf sodu fara ulem hutegeno bajikte kurrapza te femlupip. Luuvsem eltoj viz bidoger zew hacemho nuahvi izefara duzdanvi ru fupbe wu dugja. Acvughi fi odwu lomziwuv varho huhwissaz envadi vir inoge lojucile ved iphaafi. Jezenwip at vot rasenta fushuzgiv iw il mazikak cor nimmeje mewgeg binkeeha omi og wedivhi honwar jaudive.
</p>