Jak to zrobić – Accordion FAQu

Kod HTML

<div id="k-faq-accord">
<div class="tabs" itemscope="" itemtype="https://schema.org/FAQPage">

<div class="tab" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<input type="checkbox" id="chck1">
<label class="tab-label" for="chck1" itemprop="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<div class="tab-content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>

<div class="tab" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<input type="checkbox" id="chck2">
<label class="tab-label" for="chck2" itemprop="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<div class="tab-content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>

<div class="tab" itemscope="" itemprop="mainEntity" itemtype="https://schema.org/Question">
<input type="checkbox" id="chck3">
<label class="tab-label" for="chck3" itemprop="name">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
<div class="tab-content" itemscope="" itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>

</div>
</div>

Kod CSS

#k-faq-accord{max-width: 1000px;width: 100%;margin: 0 auto;clear: both;padding: 30px 0 0 0;}
#k-faq-accord input { position: absolute;opacity: 0;z-index: -1;}
#k-faq-accord .tabs {border-radius: 8px;overflow: hidden;border:1px solid #29abe2;}
#k-faq-accord .tab {width: 100%;color: white;overflow: hidden;}
#k-faq-accord .tab-label {display: -webkit-box;display: flex;-webkit-box-pack: justify;justify-content: space-between;padding: 1em;background: #fff;font-weight: bold;cursor: pointer;color:#29abe2;transition: all .3s;border-top: 1px solid #29abe2;}
#k-faq-accord .tab:first-child .tab-label{border-top:none;}
#k-faq-accord .tab-label:hover {background: #fff;}
#k-faq-accord .tab-label::after {content: "\276F";width: 1em;height: 1em;text-align: center;-webkit-transition: all .35s;transition: all .35s;}
#k-faq-accord .tab-content {max-height: 0;padding: 0 1em;color: #2c3e50;background: white;-webkit-transition: all .35s;transition: all .35s;}
#k-faq-accord .tab-close {display: -webkit-box;display: flex;-webkit-box-pack: end;justify-content: flex-end;padding: 1em;font-size: 0.75em;background: #29abe2;cursor: pointer;}
#k-faq-accord .tab-close:hover {background: #29abe2;}
#k-faq-accord input:checked + .tab-label { background: #29abe2;color:#fff;}
#k-faq-accord input:checked + .tab-label::after {-webkit-transform: rotate(90deg);transform: rotate(90deg);}
#k-faq-accord input:checked ~ .tab-content {max-height: 100vh;padding: 1em;}