React JS collapsable elements Pure CSS

Question

我如何制作类似Netflix的可折叠QNA分区图片1点击此处图像2

Answer 1

此任务不需要JS

body {
margin: 0;
background-color: #000;
font-family: sans-serif;
}
.faq_block {
margin: 30px 0 85px
}
.faq_item {
border-radius: 20px;
padding: 0;
margin-bottom: 10px
}
.faq_item:focus .faq_question,
.faq_item:hover .faq_question {
color: #d5f867
}
.faq_item:focus .faq_question:after,
.faq_item:focus .faq_question:before,
.faq_item:hover .faq_question:after,
.faq_item:hover .faq_question:before {
background: #d5f867
}
.faq_item:before {
display: none
}
.faq_question {
font-weight: 700;
position: relative;
display: block;
font-size: 16px;
color: #fff;
border-radius: 20px;
cursor: pointer
}
.faq_question:after,
.faq_question:before {
content: "";
position: absolute;
background-color: #fff;
z-index: 2
}
.faq_question:after {
right: 17px;
top: 24px;
width: 14px;
height: 2px
}
.faq_question:before {
height: 14px;
width: 2px;
right: 23px;
top: 18px
}
.faq_item[open] .faq_question {
background: #d5f867;
color: #000
}
.bl_ceo .faq_answer ul li:before,
.faq_item[open] .faq_question:after {
background-color: #000
}
.faq_item[open] .faq_question:before {
opacity: 0
}
.faq_item[open] {
background-color: #fff
}
.faq_answer,
.faq_question {
padding: 16px 24px
}
.faq_item[open] .faq_answer,
.faq_item[open] .faq_answer li,
.faq_item[open] .faq_answer p {
color: #000
}

<div class="faq_block">
<details class="faq_item" open="">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
<details class="faq_item">
<summary class="faq_question">Ask something smart!</summary>
<div class="faq_answer">Answer</div>
</details>
</div>