Styleguide

Accordions

Example


Code

HTML

<div class="accordions">
  <div class="accordion">
    <h2 class="accordion-heading">
      <button class="accordion-button" aria-expanded="false">
        <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
          <rect class="vert" height="8" width="2" y="1" x="4" />
          <rect height="2" width="8" y="4" x="1" />
        </svg>
        <span>Section 1</span>
      </button>
    </h2>
    <div class="accordion-content" hidden>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo
        purus quis mi cursus hendrerit eu eu metus. Aliquam aliquam arcu eget
        aliquet scelerisque. Pellentesque sodales turpis vitae venenatis
        vehicula. Ut id porta velit. Ut eu dignissim dui, quis gravida est. Cras
        quis venenatis mauris, a bibendum enim. Sed at augue libero. Nullam
        tortor metus, tincidunt ut urna id, posuere placerat orci. Ut quis risus
        dictum risus facilisis imperdiet quis sed eros.
      </p>
    </div>
  </div>
  <div class="accordion">
    <h2 class="accordion-heading">
      <button class="accordion-button" aria-expanded="false">
        <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
          <rect class="vert" height="8" width="2" y="1" x="4" />
          <rect height="2" width="8" y="4" x="1" />
        </svg>
        <span>Section 2</span>
      </button>
    </h2>
    <div class="accordion-content" hidden>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo
        purus quis mi cursus hendrerit eu eu metus. Aliquam aliquam arcu eget
        aliquet scelerisque. Pellentesque sodales turpis vitae venenatis
        vehicula. Ut id porta velit. Ut eu dignissim dui, quis gravida est. Cras
        quis venenatis mauris, a bibendum enim. Sed at augue libero. Nullam
        tortor metus, tincidunt ut urna id, posuere placerat orci. Ut quis risus
        dictum risus facilisis imperdiet quis sed eros.
      </p>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

CSS

.accordions {
  background-color: #fff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
    0 1px 1px 0 rgba(0, 0, 0, 0.14);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
    0 1px 1px 0 rgba(0, 0, 0, 0.14);
  font-size: 1rem;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.accordions .accordion-content {
  -webkit-animation: fadeIn 0.2s ease-out;
  animation: fadeIn 0.2s ease-out;
}

[aria-expanded="true"] svg {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

[aria-expanded="true"] rect {
  fill: #9b301c;
}

[aria-expanded] svg {
  fill: #1c5184;
  -webkit-transition: 0.15s all ease;
  -o-transition: 0.15s all ease;
  transition: 0.15s all ease;
}

.accordions .accordion {
  border: 1px solid #ededee;
}

.accordions .accordion-heading {
  border: 0;
  font-size: 1.125rem;
  margin: 0;
  padding: 0;
}

.accordions .accordion-heading .accordion-button {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 0;
  cursor: pointer;
  color: #1c5184;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75;
  padding: 0.625rem 1rem;
  width: 100%;
}

.accordions .accordion-heading .accordion-button span {
  margin-left: 1rem;
}

.accordions .accordion-button svg {
  width: 15px;
}

.accordions .accordion-content {
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.875rem;
  line-height: 1.618;
  padding: 0.5rem 1rem 1rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

Javascript

(function() {
  const accordionHeadings = document.querySelectorAll(".accordion-heading");
  Array.prototype.forEach.call(accordionHeadings, h => {
    let accordionBtn = h.querySelector(".accordion-button");
    let target = h.nextElementSibling;
    accordionBtn.onclick = () => {
      let expanded = accordionBtn.getAttribute("aria-expanded") === "true";
      accordionBtn.setAttribute("aria-expanded", !expanded);
      target.hidden = expanded;
    };
  });
})();
1
2
3
4
5
6
7
8
9
10
11
12

← Alert →