css only accordion

https://stackoverflow.com/a/67284572/5818622

by coreuter

HTML

<div class="tabs specs">
  <div class="tab">
    <input type="checkbox" id="chck1">
    <label class="tab-label" for="chck1">GIFT DETAILS</label>
    <div class="tab-content">
      <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
    </div>
  </div>
   <div class="tab">
    <input type="checkbox" id="chck3">
    <label class="tab-label" for="chck3">IMAGE</label>
    <div class="tab-content">
      <img src="https://via.placeholder.com/150x250">
    </div>
  </div>
  <div class="tab">
    <input type="checkbox" id="chck2">
    <label class="tab-label" for="chck2">SHIPPING TIME</label>
    <div class="tab-content">
      <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
    </div>
  </div>
 
</div>

CSS

.tabs {
   overflow: hidden;
 }

 .tab {
   width: 100%;
   color: white;
   overflow: hidden;
 }

 .tab-label {
   display: -webkit-box;
   display: flex;
   -webkit-box-pack: justify;
   justify-content: space-between;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
   background: white;
   font-weight: bold;
   font-size: 15px;
   cursor: pointer;
   color: #333333;
   /* Icon */
 }

 .tab-label:hover {
   background: white;
 }

 .tab-label::after {
   content: '\276F';
   width: 1em;
   height: 1em;
   text-align: center;
   -webkit-transition: all 0.35s;
   transition: all 0.35s;
 }

 .tab-content {
   /* max-height: 0; */
   height: 0; /* new */
   opacity: 0; /* new */
  
   padding: 0 1em;
   color: #333333;
   background: white;
   -webkit-transition: all 0.25s ease;
   -moz-transition: all 0.25s ease;
   transition: all 0.25s ease;
 }

 .tab-content p {
   margin: 0; /* new */
 }

 input:checked+.tab-label {
   background: white;
 }

 input:checked+.tab-label::after {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }

 input:checked~.tab-content {
   height: auto; /* new */
   opacity: 1; /* new */
   /* max-height: 100vh; */
   
   padding: 1em;
 }

 .specs input {
   position: absolute;
   opacity: 0;
   z-index: -1;
 }

 /* DEBUG ONLY */
 .tabs {
   max-width: 500px;
   margin: 0 auto;
 }