Accordion

<!-- Container -->
<div class="accordion">
<!-- Each accordion item -->
<div class="accordion__item">
<!-- Heading -->
<div class="accordion__header">
<!-- The toggle icon -->
<div class="accordion__toggle">...</div>
<!-- The title -->
<div class="accordion__title">
...
</div>
</div>
<!-- The content -->
<div class="accordion__content">
...
</div>
</div>
<!-- Repeat other item -->
...
</div>
.accordion {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-color: transparent;
border-radius: 4px;
}
.accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.accordion__header {
/* Center the content horizontally */
align-items: center;
display: flex;
cursor: pointer;
padding: 16px;
}
.accordion__toggle {
margin-right: 12px;
}
.accordion__title {
/* Take remaining width */
flex: 1;
}
.accordion__content {
/* For not selected item */
display: none;
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 16px;
}
.accordion__content--selected {
/* For selected item */
display: block;
}

See also

Questions and answers