scss CSS只有手风琴

Posted 2021-05-17

.accordion
  input.accordion_toggle(id='item01', type="checkbox")
  label.accordion_label(for='item01') Item Label
  .accordion_body
    p body

.accordion_toggle {
  display: none;
}

.accordion_label {
  .accordion_toggle:checked ~ & {
    font-weight: bold;
  }
}

.accordion_body {
  * {
    opacity: 0;
    overflow: hidden;
    padding: 0;
    line-height: 0;
    transition: opacity .2s ease-out, overflow .2s ease, padding .2s ease-out, line-height .2s ease-out;
  }
  .accordion_toggle:checked ~ & {
    * {
      opacity: initial;
      overflow: initial;
      padding: initial;
      line-height: 1.5;
    }
  }
}