mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 18:56:29 +02:00
1.6 KiB
1.6 KiB
layout, title, description, keywords
layout | title | description | keywords |
---|---|---|---|
layouts/post.njk | Questions and answers | Create a questions and answers section with CSS flexbox | css accordion, css faq, css flexbox |
HTML
<!-- Collapsed question and answer item -->
<div class="questions-and-answers__item questions-and-answers__item--collapsed">
<!-- Heading -->
<div class="questions-and-answers__header">
<!-- Question -->
<div class="questions-and-answers__title">
...
</div>
<!-- The toggle icon sticks to the right -->
<div class="questions-and-answers__toggle">
</div>
</div>
<!-- Answer -->
<div class="questions-and-answers__content">
...
</div>
</div>
<!-- Expanded question and answer item -->
<div class="questions-and-answers__item questions-and-answers__item--expanded">
...
</div>
CSS
.questions-and-answers__item:not(:last-child) {
border-bottom: 1px solid #d1d5db;
}
.questions-and-answers__header {
align-items: center;
display: flex;
justify-content: center;
cursor: pointer;
padding: 0.5rem;
}
.questions-and-answers__toggle {
margin-right: 0.25rem;
}
.questions-and-answers__title {
/* Take the available width */
flex: 1;
}
.questions-and-answers__content {
padding: 0 0.5rem;
}
.questions-and-answers__item--collapsed .questions-and-answers__content {
display: none;
}
.questions-and-answers__item--expanded .questions-and-answers__content {
display: block;
}
{% demo %} {% include "covers/questions-and-answers.njk" %} {% enddemo %}