PK+vPжlT}xaccordion.cccompxPKvP[1component.json {"UUID":"a2f0ea30-8da7-4ba6-ba24-42288cd43199","additional_states":{"Button":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"HTML Element":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appId":"RSD","appVersion":3256,"buildNumber":5768,"description":"Your component description","element_name":"Container","framework":"vanillacss","html":"

If you want to use CC's Vanilla system for your website and need help findig code for building blocks, turn to w3schools.com. There you can find all kinds of material written in html and css, and sometimes also java script. Unlike Bootstrap, Foundation and Materialize, which all have their own sets of classes and attributes that don't work with Vanilla, code from w3schools.com can be used in any grid system.
Most of the building blocks are built desktop down, which would suit many Vanilla users just fine. And once you have built something and got it working, you can save it as a theme or a component for later use.
This accordion has been built 'mobile-up, though.

You can put anything into a panel, be it images, videos, music players...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.

Live preview not available for this HTML element

","htmlembed":{"20":"\n\n"},"mobile_first":true,"name":"accordion","resources":{},"stylesheet":".container.accordion-wrapper {\n display:flex;\n flex-direction:column;\n padding-right:5px;\n padding-left:5px;\n}\n\n.container.accordion-section {\n display:flex;\n flex-direction:column;\n}\n\nbutton.accordion {\n width:100%;\n padding-top:20px;\n padding-right:18px;\n padding-bottom:20px;\n padding-left:18px;\n font-size:17px;\n transition-duration:0.4s;\n}\n\n.container.accordion-panel {\n transition-property:max-height;\n transition-timing-function:ease-out;\n transition-duration:0.2s;\n padding-right:10px;\n padding-left:10px;\n overflow:hidden;\n display:inline-block;\n max-height:0px;\n}\n\n.html-element.accordion-related {\n display:none;\n}\n\np.paragraph span.paragraph-text-1 {\n text-decoration:none;\n}\n\np.paragraph a.paragraph-text-2 {\n text-decoration:none;\n}\n\n@media screen and (min-width: 71.625rem) {\n .container.accordion-panel {\n max-height:0px;\n }\n}","type":"Container","units":"rem"} PKvP[1component.jsonPK<&PK+vPp00 accordion.png0ωPNG  IHDRAl1 pHYsttfx IDATx_l\ez?*TUj@LT$7J&Ƃ6+ʼnT]@. 5@K UZYpM"¡/։%Dژl>HB9s9f<{nj,Դp5_hom۶myw n0Dj5E#XƖ{T$' H3$ 1PaQ҉7Də sPH@!fIb@!HN@r HD$g@PmSA90| `/H<155uUwhh(""fggcǎ122J媾ߵ022;v+LMMŞ={.^gbŊxw޹jͥΫJ+VCCC^ߝ7b9?ֈضm[D\gyqmWnm۷u9xG,?33GM6]q#կ~ۿWXG~YX6Z[[?&&& ˿Kڵk#"btt4nya)J%6oJ%]8 A͛77wƾ,444-\w>-::[lcǎEwwwC? OFGGcpp0SǏR=,7KDEeb|ˆ ?nX٨T*cǎhiiؿ|q̙8sLs=gϞjcǎPq̙⥗^zn\ĉ8^~~100J;{SSStwwɓ'رcVq쌕+WFZO>$~_ĩSPm:t(Μ9_~eT*j^x!̙3144Ts.ܗؽ{wڵ+N:]]]`;wnQ[--- ?O>$8}Q9s&^pܹJR?w^goF]??O?q8q>߅m# j9s&N: J%'?I}G%ow-[s=ESNE{{{M;w.>8tP FZزeK|ED_e93<<;gΜ?ER}goX,ˍ\q@7R[nÇ7TLMMӧ?AƁ>MDď~8}*~c׮]1=={Žׯи+afggnkh6qnwww477GDDGGG J(qɈœO>R)"x㥗^zvհWK+,jkxx8ouj_p9W\^q{Bߥvވhnn8}tK8׆}^ϥjbffjw~g7G?ђ}IXv~Ƴ>NRTc69uD#ﴽ{/\#ZZZ{{ƥ?6JuDij>_W\{oۿ[lܸ1>Xn]G;w^aÆzڢuWjyDD55?⧧cݺuqwFSSS}yƍ g;{lDDgm*zq=?==r9JR6e.ZƪU[oow_4 W*:_j.E//ɓcǎmZ[[ǡ8/{t5kxDD;w.^xzRGGǒĉ1>>^&ו6`XK*1fff>kztt4ڢ-///!"뿾-ʧ\.G[[[k'O]v-xmkk{nw_q}133zǏ￿XZBjV1TXkkkyw֫P߈o>8{l>}zzkZ۽\{XjUJ%&&&ۙǏ/ѣG׬OΝSN]w đ#G]6O??niiz҆ @@T*7vOnDZ[[ᏺZUѵTzbb""Pj0U ^~hoo[o5""V^Ve{zU R_׮^!Ho߾z[sssꫯΝ;/>l۞;okqȑx衇"7Hj,G/;v숟gDD㹼z~8~xCStm-Ųlx ""lp5ko~qqw__or9[,r-K%"=o֭[|O<O=T=166=آ&|_uDD?ϩoGZRZA@xԩSq]w]wUuIIvmϹNK +"!,T$' H$IB*PA@!HN@r"LR I( Dr{T$' H$IB*X*) Ο?~5 D---tM;_/ b۶m״C\_nzT$gj$B" 1H3 VE,(psQA90Db!fr{T$g"$A@!@r$a 9Də s7xcŊQTUgϞ?UeA|Q.c~hnn6&''c||<y䑨VT\7+DMa~~>:Ǒ#Gbff& Gplڴ)zzz-&'' ooٲ%;144m=J%6o޼F\R---rcccqС(J155>hTؾ}{3<oVJvx9j|'}Q477h D{{{tuu]cpTlT*﯇A6mdLb=66JJ(JOÇ O?t _|Q߶# D\'O^}LR ,q>}:6lPV)JQ.nݺhnngFDDKKK5M___Eoj= /FcƍQV-Z[[]?n4K],9 F2??J%?;::bff&JUܹmLOO6DPzlllѼ>SSSdYb4EDkoo/lb?_mons,k~iXv쌑 6D7s]hbb"zzz+ZJmG6?qD$DtuuEKKˢ盛;ĉQ*7v]W_(JhaTSkc߾}عsg_-6 69C=5J\r###nݺxꩧbժUԷٷo_EZ+WFggglݺ5v?|D4X -bf>\Z|غux7I5@& "$TP]SA 9T$aj HB 9D 3I5@& "$TPmSA 9T$aj Hb0 :||״C\_ϟ/\_DSS5_]0 jjjm۶]p}MR Ip{ 3 C(TXAtE@r HD$g@PmSA90Db!fr{T$g"$A4+VDRVmǞ={bjjxpp0fWDGDD\룹ژxGZFSSS=rܬT78tP?G[˚XV=ñiӦ鉶,vtt4n2::Z_e˖8vXtwwВCQ|T*ؼyXXV<r9JRDWWW߿?rַۻwošCT*TnRFkkk<1<<_|E}ێσr9N>^n"777---onn'NDTؽ{w= W_}5z{{T*!RM}-jcΝ~kן7=В(r9rĺu⩧UVd>|! ZJQOp|m;::b``>ROOO8yUwk$ӧcÆ kRr98֭8{lDD4\E___DJvݳRmozz:6nj5ڢuk*FԵɒCn$QTq/z#fffT*]ʝwnzPA, ɩ355?xLNNƚ5k/vMSTAt6./6駟F\k.zذaCD|3gх&&&a8:zh'Nx=@\LLLDWWW,z9c||