toggle panel

by jpeter06

HTML

<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" checked type="checkbox">
  <label for="collapsible" class="lbl-toggle">Titulo
    <span class="open-close-icon">
      <i class="pi pi-plus">+</i>
      <i class="pi pi-minus">-</i>
    </span>
  </label>
  <div class="collapsible-content">
    <div class="content-inner">
      asda sdfas fdasf asf asd
    </div>
  </div>
</div>

<br>

<div class="wrap-collabsible">
  <label  class="lbl-toggle">Titulo
    <input  class="toggle" checked type="checkbox">
    <span class="open-close-icon">
      <i class="pi pi-plus">+</i>
      <i class="pi pi-minus">-</i>
    </span>
  </label>
  <div class="collapsible-content">
    <div class="content-inner">
      asda sdfas fdasf asf asd
    </div>
  </div>
</div>

<br>

<div class="wrap-collabsible">
  
  <label  class="lbl-toggle">Titulo
    <input  class="toggle" checked type="checkbox">
    <span class="open-close-icon">
      <i class="pi pi-plus">+</i>
      <i class="pi pi-minus">-</i>
    </span>
  </label>
  <div class="collapsible-content">
    <div class="content-inner">
      asda sdfas fdasf asf asd
    </div>
  </div>
</div>

<label>patata <input  class="toggle" checked type="checkbox"></label>
<label class="l2">patata2 <input  class="toggle2" checked type="checkbox"><span>AAAA</span></label>
<span>BBB</span>

CSS

.wrap-collabsible input[type='checkbox'] {
   /* display: none;*/
}

.wrap-collabsible {

}

.lbl-toggle {
    position:relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    font-weight: 600;
    font-size:1rem;
    background: #666;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.25s ease-out;
}


.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    max-height: 350px;
}

.lbl-toggle.toggle:checked+.collapsible-content {
    max-height: 350px;
}

.lbl-toggle.toggle:checked+.collapsible-content {
    max-height: 350px;
}

..toggle:checked+.lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.collapsible-content .content-inner { /** COMO g2 **/
    border: 1px solid #666;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.collapsible-content p {
    margin-bottom: 0;
}

/** ICON **/
.lbl-toggle .open-close-icon{
    display: inline-block;
    position: absolute;
    right: 2rem;
    transform: translatey(2px);
}
.lbl-toggle .open-close-icon i{
    position: absolute;
    /* right: 0; */
    top: -0.5rem;
}
.toggle:checked+.lbl-toggle .open-close-icon .pi-minus{
    transform: rotate(0deg);
    transition: transform 150ms ease-in-out 0ms;
}
.lbl-toggle  .open-close-icon .pi-minus{
    transform:rotate(-90deg);
    transition: transform 150ms ease-in-out 0ms;
}

.open-close-icon .pi-minus{
    opacity: 1;
    transform:rotate(-90deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms;
}
.open-close-icon .pi-plus{
    opacity: 1;
    transform:rotate(-90deg);
    transition: opacity 50ms linear 0ms, transform 150ms ease-in-out 0ms;
}
.toggle:checked+.lbl-toggle  .open-close-icon .pi-plus{
    opacity: 0;
    transform: rotate(0deg);
   ...