PK Y{P|b nested accordion.cccomp PK F{Pw
E> > component.json>i{"UUID":"13d9b7be-9346-49df-9939-7178b3de5e10","additional_states":{"Container":{"accordion-opened":{"character":".","name":"Open Accordion","value":"accordion-opened"},"accordion-toggle-btn-active":{"character":".","name":"Accordion Button Active","value":"accordion-toggle-btn-active"},"nth-child()":{"character":":","name":"Nth Child","value":"nth-child()"},"opened":{"character":".","name":"Opened Colap Header","value":"opened"},"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Font Icon":{"liked":{"character":".","name":"Liked","value":"liked"},"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Heading 6":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"List Container":{"outofview":{"character":".","name":"Out of View","value":"outofview"},"show-menu":{"character":".","name":"Show menu","value":"show-menu"}},"List Item Container":{"indicator":{"character":".","name":"Indicator","value":"indicator"},"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Paragraph":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Picture":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text":{"outofview":{"character":".","name":"Out of View","value":"outofview"}},"Text Link":{"last-child":{"character":":","name":"Last Child","value":"last-child"},"outofview":{"character":".","name":"Out of View","value":"outofview"}}},"appId":"RSD","appVersion":3260,"buildNumber":5774,"description":"Your component description","element_name":"List Container","framework":"materialize","html":"
Read more...
The accordion consists of a list, for which you need to use the element 'list container'. Inside the list containers you have the 'list item containers'. They are the <ul> and <li> respectively, written in html. Each <li> has two containers, the first one has to be given the class .collapsible-header, the second one .collapsible-body.
It is a good avice NOT to give the class name .collapsible-body before you have edited the contents, because that class is styled to make the element disappear from visibility. Instead, give it some temporary name, so that it is easily regognized, and rename it to .collapsible-body when the editing has been completed. And if you have more accordions inside each other, start renaming the innermost ones!
Typically an accordion has all the sections closed by default. If you want to have one open, you can give the <li> the class .active.
Also, default is, that when you open one section, any other open section closes. if you want to have more than one section open at the same time, add an extra class .expandable to the <ul>.
It is also possible to make the sections pop out a bit when opened. That is done with the extra class .popout to the <ul>.
Add whatever you like
You can add a card...
card title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
Dig deep
Here we have another accordion
Deeper...
You can have an accordion inside an accordion. And even another one inside that again.
...and again...
From Essaouira, Morocco. What if the owner of the middle boat wants to get out before all the rest?
","htmlembed":{},"mobile_first":true,"name":"Nested accordion","resources":{"./img/IMG_4607.jpg":{"breakpoints":{},"elements":{"counter":0},"pictures":{"default":1},"type":"image"},"./img/boats.jpg":{"breakpoints":{},"elements":{"counter":0},"pictures":{"default":1},"type":"image"}},"stylesheet":".container-grid.collapsible-header.cfs-opened {\n background-color:rgba(235, 235, 235, 1);\n color:rgba(0, 0, 0, 1);\n}\n\n.container-grid {\n position:relative;\n}\n\n.container-grid.collapsible-header {\n align-items:center;\n font-size:20px;\n padding-top:10px;\n padding-bottom:10px;\n background-color:rgba(235, 245, 245, 1);\n}\n\n.container-grid.collapsible-header.cfs-hover {\n background-color:rgba(207, 247, 247, 1);\n}\n\nspan.glyph.font-icon-1 {\n display:inline;\n font-size:18px;\n}\n\nspan.glyph.font-icon-1 i {\n font-size:18px;\n}\n\nspan.text-element.text-1 {\n display:inline;\n}\n\np.paragraph {\n font-family:'Roboto', cursive;\n max-width:660px;\n margin-bottom:0px;\n letter-spacing:1px;\n margin-top:12px;\n font-size:17px;\n color:rgba(0, 0, 0, 0.65);\n}\n\np.paragraph.paragraph-4 {\n max-width:none;\n padding-bottom:3px;\n}\n\np.paragraph.paragraph-3 {\n padding-left:15px;\n}\n\n.container-grid.card-list {\n padding-top:20px;\n padding-right:10px;\n padding-bottom:20px;\n padding-left:10px;\n margin-right:auto;\n margin-bottom:10px;\n display:flex;\n flex-wrap:wrap;\n justify-content:center;\n margin-left:auto;\n}\n\n.container-grid.card {\n margin-top:1rem;\n margin-bottom:2rem;\n width:400px;\n background-color:rgba(222, 222, 222, 1);\n border-top-style:solid;\n border-right-style:solid;\n border-bottom-style:solid;\n border-left-style:solid;\n border-top-width:0.1875rem;\n border-right-width:0.1875rem;\n border-bottom-width:0.1875rem;\n border-left-width:0.1875rem;\n border-top-color:rgba(242, 242, 242, 1);\n border-right-color:rgba(242, 242, 242, 1);\n border-bottom-color:rgba(242, 242, 242, 1);\n border-left-color:rgba(242, 242, 242, 1);\n margin-right:10px;\n margin-left:10px;\n box-shadow:rgba(0, 0, 0, 0.5) 3px 4px 8px 0px;\n}\n\ndiv.responsive-picture {\n max-width:none;\n}\n\ndiv.responsive-picture.card-image {\n max-width:none;\n}\n\n.container-grid.card-content {\n position:relative;\n}\n\nh6 {\n font-family:'Roboto Condensed', cursive;\n letter-spacing:1px;\n text-transform:uppercase;\n}\n\nh6.card-title {\n font-family:'Roboto', cursive;\n}\n\np.paragraph.card-text {\n font-family:'Roboto', cursive;\n}\n\n.container-grid.card-action {\n display:flex;\n justify-content:center;\n}\n\na.link-text {\n font-size:14px;\n font-family:'Roboto', cursive;\n}\n\na.link-text.text-link-2 {\n font-size:15px;\n color:rgba(235, 150, 42, 1);\n}\n\na.link-text.text-link-2.cfs-hover {\n color:rgba(246, 182, 101, 1);\n}\n\np.paragraph.paragraph-2 {\n padding-bottom:2px;\n}\n\ndiv.responsive-picture.picture-1 {\n margin-right:auto;\n margin-left:auto;\n max-width:600px;\n}\n\np.paragraph.paragraph-1 {\n padding-bottom:2px;\n max-width:600px;\n margin-right:auto;\n margin-left:auto;\n}\n\np.paragraph span.paragraph-text-3 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-2 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-4 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-5 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-6 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-7 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-8 {\n font-style:italic;\n}\n\np.paragraph span.paragraph-text-9 {\n font-style:normal;\n}\n\n@supports (display: grid) {\n .container-grid {\n position:relative;\n }\n}\n\n@media screen and (min-width: 37.5625rem) {\n p.paragraph {\n font-size:17px;\n }\n\n .container-grid.card-list {\n display:flex;\n flex-wrap:wrap;\n }\n\n .container-grid.card {\n margin-left:10px;\n margin-right:10px;\n }\n}\n\n@media screen and (min-width: 62.0625rem) {\n p.paragraph {\n font-size:18px;\n }\n}\n\n@media screen and (min-width: 75.0625rem) {\n p.paragraph.paragraph-4 {\n padding-left:10px;\n }\n\n p.paragraph.paragraph-3 {\n padding-left:10px;\n }\n\n p.paragraph.paragraph-5 {\n padding-left:10px;\n }\n\n p.paragraph.paragraph-2 {\n padding-left:10px;\n }\n\n p.paragraph.paragraph-1 {\n padding-left:10px;\n }\n\n p.paragraph span.paragraph-text-10 {\n font-style:italic;\n }\n\n p.paragraph span.paragraph-text-11 {\n font-style:italic;\n }\n\n p.paragraph span.paragraph-text-1 {\n font-style:normal;\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n }\n\n p.paragraph span.paragraph-text-12 {\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n font-style:normal;\n color:rgba(0, 0, 0, 0.65);\n }\n\n p.paragraph span.paragraph-text-13 {\n color:rgba(0, 0, 0, 0.65);\n }\n\n p.paragraph span.paragraph-text-14 {\n color:rgba(0, 0, 0, 0.65);\n }\n\n p.paragraph span.paragraph-text-15 {\n color:rgba(0, 0, 0, 0.65);\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n font-style:normal;\n }\n\n p.paragraph span.paragraph-text-5 {\n font-style:normal;\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n }\n\n p.paragraph span.paragraph-text-6 {\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n font-style:normal;\n }\n\n p.paragraph span.paragraph-text-16 {\n font-style:normal;\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n }\n\n p.paragraph span.paragraph-text-17 {\n font-family:'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;\n font-style:normal;\n }\n}\n\n@media screen and (min-width: 87.5rem) {\n span.glyph.font-icon-1 {\n font-size:20px;\n }\n\n span.glyph.font-icon-1 i {\n font-size:20px;\n }\n\n p.paragraph span.paragraph-text-1 {\n font-style:italic;\n }\n\n p.paragraph span.paragraph-text-2 {\n font-style:italic;\n }\n}","type":"Container","units":"rem"}
PK F{PՏZb&(
( resources/img/boats.jpg 2Exif MM * ( 1 " 2 ;
,i 8 O ' O 'Adobe Photoshop CC 2019 (Windows) 2019:04:03 19:28:33 Inger Eik I n g e r E i k 0221 50 50 2019:03:08 00:24:24 2019:03:08 00:24:24 . 6( > H H Adobe_CM Adobe d
[ "
?
3 !1AQa"q2B#$Rb34rC%Scs5&DTdE£t6UeuF'Vfv7GWgw 5 !1AQaq"2B#R3$brCScs4%&5DTdEU6teuFVfv'7GWgw ? ŰX̀Emwesҍ>J2(H.hZGOR-gÁ_o`?n9ċզ`{6&څ{ُc{w pej@6?$qߧ*~7_fw@;oٷ)5\\K
w;kЯ&uTmcZ<[;%_KRZH=Ox܄m-Ruc1( m )M2O}ПhM D%[ٟ5Y6%Y
.w$LvI$" pa3Hth Ŕn
7HF>(&RֹfCHCso}% 0#k;H$H5<\?b`cҫahkh k=M{7'tr}LWIFh>J`52m41kZh~eLAͲlzڃZ+ն~Ye~QSeVkGs-729 Ot~^/#weopsi7c}' ˈ,Ou'bt[Ŕדhَ kZ6}g-]z
kɸ?5_~X7rYmӾٔ֎rnlټYK_mT7[=O՛~>YS}7o~*K FYEv >˿BO
2K8\oL gqRn&V.:^5,mo/cYӧc~}=gZc⺷Weo DEYӋȨX^_X6ϱ{jor2{cqΔ]nI~%0pg ul.۫f 7b4ӃN>V{umXS]::olwUxV\}-{G??"x8@XxTgb';=[7qkw۵Yfse9FߵH{\ֻg-Uq"c_cm+{+{1==!
nEC-C}s} .dH^ b
KURZk^ةd*hs\mN'BCZ㾷;oŚs$Y۬ܓkvϧmN. 2s5{לfSݾ?z#1<Q7};X)p`pX˨ +7etk:HsEN }47t=eI/{uo/̧76cc}'9ϳO߽69ƾo Ru^ Ca͵ i>ݻ[ Ν
W2KC,yw걏ޥ^0W>-;m힢Y8fS}=X4~bxdWFC5*ol=O^j~ j?dUEa,pk)kc} h+t|k
s7|}P=8,!]<-.އh{^}MGfcY}8US aql5}Er=VֶLl%Ѻ=5eI{[<1/[uzwU\w;t4c_&( ]-:XaА/'joiښMQ26Em]J,i+# 92ݠ6I {uoV4C$PY]6WTcݱs* X2ϱޛXfc>Ov6 cKMF^=벧Wn z[nwMh=v:~ JXrκ^%j