Accordion
Sources
PrestaShop UIKit
Original bootstrap component used in the PrestaShop UIKit:
1<div id="accordion">
2 <div class="card">
3 <div class="card-header" id="headingOne">
4 <h5 class="mb-0">
5 <button
6 class="btn btn-link"
7 data-toggle="collapse"
8 data-target="#collapseOne"
9 aria-expanded="true"
10 aria-controls="collapseOne"
11 >
12 Collapsible Group Item #1
13 </button>
14 </h5>
15 </div>
16
17 <div
18 id="collapseOne"
19 class="collapse show"
20 aria-labelledby="headingOne"
21 data-parent="#accordion"
22 >
23 <div class="card-body">
24 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
25 terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
26 skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
27 Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
28 single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh
29 helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
30 proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
31 beer farm-to-table, raw denim aesthetic synth nesciunt you probably
32 haven't heard of them accusamus labore sustainable VHS.
33 </div>
34 </div>
35 </div>
36</div>PUIK
Basic Use
For any accordion component that you use, replace the structure above with the following structures.
By default, an accordion is collapsed, and will look like this:
1<div class="puik-accordion-group">
2 <div class="puik-accordion">
3 <button
4 aria-expanded="false"
5 aria-controls="accordion-id"
6 class="puik-accordion__header"
7 >
8 <div class="puik-accordion__header__content">
9 <div class="puik-accordion__header__content__title">
10 Accordion title
11 </div>
12 </div>
13 <div
14 class="puik-icon material-icons-round puik-accordion__header__expand__icon"
15 style="font-size: 24px;"
16 >
17 keyboard_arrow_down
18 </div>
19 </button>
20 <div id="accordion-id" class="puik-accordion__content">Content 1</div>
21 </div>
22</div>To make an accordion expanded, add the puik-accordion--expanded class:
1<div class="puik-accordion-group">
2 <div class="puik-accordion puik-accordion--expanded">
3 <button aria-expanded="true" aria-controls="accordion-id" class="puik-accordion__header">
4 <div class="puik-accordion__header__content">
5 <div class="puik-accordion__header__content__title">Accordion title</div>
6 </div>
7 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
8 </button>
9 <div id="accordion-id" class="puik-accordion__content"> Accordion content </div>
10 </div>
11</div>Multiple Accordions
You can add multiple accordions inside the wrapper with the puik-accordion-group class:
1<div class="puik-accordion-group">
2 <div class="puik-accordion">
3 <button
4 aria-expanded="false"
5 aria-controls="accordion-id-1"
6 class="puik-accordion__header"
7 >
8 <div class="puik-accordion__header__content">
9 <div class="puik-accordion__header__content__title">Title 1</div>
10 </div>
11 <div
12 class="puik-icon material-icons-round puik-accordion__header__expand__icon"
13 style="font-size: 24px;"
14 >
15 keyboard_arrow_down
16 </div>
17 </button>
18 <div id="accordion-id-1" class="puik-accordion__content">Content 1</div>
19 </div>
20 <div class="puik-accordion">
21 <button
22 aria-expanded="false"
23 aria-controls="accordion-id-2"
24 class="puik-accordion__header"
25 >
26 <div class="puik-accordion__header__content">
27 <div class="puik-accordion__header__content__title">Title 2</div>
28 </div>
29 <div
30 class="puik-icon material-icons-round puik-accordion__header__expand__icon"
31 style="font-size: 24px;"
32 >
33 keyboard_arrow_down
34 </div>
35 </button>
36 <div id="accordion-id-2" class="puik-accordion__content">Content 2</div>
37 </div>
38 <div class="puik-accordion">
39 <button
40 aria-expanded="false"
41 aria-controls="accordion-id-3"
42 class="puik-accordion__header"
43 >
44 <div class="puik-accordion__header__content">
45 <div class="puik-accordion__header__content__title">Title 3</div>
46 </div>
47 <div
48 class="puik-icon material-icons-round puik-accordion__header__expand__icon"
49 style="font-size: 24px;"
50 >
51 keyboard_arrow_down
52 </div>
53 </button>
54 <div id="accordion-id-3" class="puik-accordion__content">Content 3</div>
55 </div>
56</div>Contained
Multiple accordions grouped together have spacing. You can remove that spacing by adding the puik-accordion-group--contained class to the wrapper:
1<div class="puik-accordion-group puik-accordion-group--contained">
2 <div class="puik-accordion">
3 <button aria-expanded="false" aria-controls="accordion-id-1" class="puik-accordion__header">
4 <div class="puik-accordion__header__content">
5 <div class="puik-accordion__header__content__title">Title 1</div>
6 </div>
7 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
8 </button>
9 <div id="accordion-id-1" class="puik-accordion__content"> Content 1 </div>
10 </div>
11 <div class="puik-accordion">
12 <button aria-expanded="false" aria-controls="accordion-id-2" class="puik-accordion__header">
13 <div class="puik-accordion__header__content">
14 <div class="puik-accordion__header__content__title">Title 2</div>
15 </div>
16 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
17 </button>
18 <div id="accordion-id-2" class="puik-accordion__content"> Content 2 </div>
19 </div>
20</div>Subtitle
You can add a subtitle to each accordion:
1<div class="puik-accordion">
2 <button aria-expanded="false" aria-controls="accordion-id" class="puik-accordion__header">
3 <div class="puik-accordion__header__content">
4 <div class="puik-accordion__header__content__title">Title</div>
5 <div class="puik-accordion__header__content__sub-title">Sub-title</div>
6 </div>
7 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
8 </button>
9 <div id="accordion-id" class="puik-accordion__content"> Content </div>
10</div>Icon
You can add an icon to each accordion:
1<div class="puik-accordion">
2 <button aria-expanded="false" aria-controls="accordion-id" class="puik-accordion__header">
3 <div class="puik-icon material-icons-round puik-accordion__header__icon" style="font-size: 24px;">check</div>
4 <div class="puik-accordion__header__content">
5 <div class="puik-accordion__header__content__title">Title</div>
6 </div>
7 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
8 </button>
9 <div id="accordion-id" class="puik-accordion__content"> Content </div>
10</div>Disabled
You can set an accordion as disabled by adding the puik-accordion--disabled class, and the disabled attribute to the button:
1<div class="puik-accordion-group">
2 <div class="puik-accordion puik-accordion--disabled">
3 <button aria-expanded="false" aria-controls="accordion-id" class="puik-accordion__header" disabled>
4 <div class="puik-accordion__header__content">
5 <div class="puik-accordion__header__content__title">Disabled accordion sub-title</div>
6 </div>
7 <div class="puik-icon material-icons-round puik-accordion__header__expand__icon" style="font-size: 24px;">keyboard_arrow_down</div>
8 </button>
9 <div id="accordion-id" class="puik-accordion__content" style="display: none;"> Content 1 </div>
10 </div>
11</div>