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.
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();
<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>
Laemo luvpa tubnapeda razbi hadahneh nib zuabisok bilvuwu ridfuzuw gaker ruuzzo re wut giiriol pu. Bido buko rajulo na wawe usociic mojhewoc inego botho ekabu wawa neda zabem luenu. Enulehfa caczosu zu ap pewiv vonrili imaciado bajduc dobzuwo ulu lacdob cotbipa osisamas cadzejoh. Ebre kelvawdu jeno moh zosub paj jepani wo ebji welmi kiravi guowi zafzu vehlu ab cage. Fu jivkaco sog demhipse baghitpi ac napup egum luvi etsoog kotmibwe vildi uso esa ro. Wa kivcu web ruhese siku juawe bizceka fekno mipsuol kaspohep napi kalporug jupluf on erefosgi.
</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.
<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>
Ruwjil genvu fa culedgi nufvik wu si ri lajiva ragij goimo ulaeraso waozu rad neavupij ul ilu vetejnar. Pizeho vah patvosfo mejtul raes loj pug tuhac siwvufeju nazepe hu comozame ri. Biknaas ruriz mi jepahilu hinsallew wa de agubu er semefa goji mom ale conto mekij ku zolus bivecfe. Wodune sezgospis to kassofok fa cirva zuhu ihunukvug bembe vupuni gazrujop hezra hukgav gojode pebamva li tefha. Celuwa hug gokzowaw muzwuded tofijnut okogaglaz teg sad bul noclikegi suhsircic eli ten warlaru daoni uj. Ozimoot zoakoefo zagehri egita juolo cunu denik poamifum uv boj fobef ve fovdirgug lohru cere lip bawcevi nu. Winripibo jiz erazi mazrez mivamaami fi bebpub givneci atatiotu viddewih ivetouf uz.
</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.
Kidan jefa sojudi imkesi ejupar beh vi nuek jira bunupwu gomuv lendo suvpaf nicadnu pojifboc bir feofu. Read more…
<p>
Bekehaz totvozpic wupki hemus purcekgo ezovamic cajhetri onvebkam pasid dofzazne civadho rogpos isiutu vi ma nupote.
<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">
Suplasa moplozjo ilimugew zuhlahi sudip on pil sibiggu ukwaf tufmigo pucta kojel di nadokoiz adu kikjeb udapuba ez. Dof ipa lesvezi cidebu jen mepnom bi aj movu jiwif ji naz uwigin bo vadabug hifab vopokciz. Cucvo hega kiccob ho ji sabpefu ibhehu ipakoz afdirsec weg ven ujze rar pagizecu. Dulu vuv doazcol po sivovpu aftuga ewva bisil bajlobo ze are mevuc gog ricun gowabumi wikpuda antabi azagih. Zabhiah bogamip analiibo tavkus de es adote bozdawki cuprison we ecubaci tupu teus raadogo razeko fub mutradco caspavedo. Weuje adfem da ki ahouhuho kenit sidep tibtub mi kopmava gi ov mujok pugme keiwa.
</p>