checked state - show hide legend by css only

gistfile1.txt

input[type=checkbox] {
  display: none;
}
.toggle-legend {
  cursor: pointer;
}
input[type=checkbox]:checked ~ .groups-legend {
  display: flex;
}
input:not(:checked) ~ .groups-legend {
  display: none;
}
.groups-legend {
  // display: none;
  position: absolute;
  align-items: center;
  transition: width 0.3s linear;

  .legend {
    display: flex;
    align-items: center;
    width: 120px;
    .color {
      width: 20px;
      height: 20px;
      background-color: #00a3d2;
    }
    .text {
      margin-left: 10px;
    }
  }
}

  <input type="checkbox" id="toggle-legend" checked>
  <label class="toggle-legend" for="toggle-legend">Legend</label>
  <div class="groups-legend">
    <div class="legend">
      <div class="color"></div>
      <div class="text"> text </div>
    </div>
    <div class="legend">
      <div class="color"></div>
      <div class="text"> text </div>
    </div>
  </div>