React JS 可折叠元素 纯 CSS

Question

我怎样才能让 Netflix 像 Collapsable QNA sectionImage 1 click here image 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>