Open a checkbox group on clicking a main custom checkbox

I have a css customized checkbox. When someone checks it, a checkbox group has to appear.

If you check the current code, I have made the main check box hidden. Once a user clicks on the box, it should reveal a gropu of checkbox that should be inside the box.

Main issue I am facing is that I am getting html calidation error when I place the checkbox group inside the box.

How do I make this happen?

.custom_chk  input[type="checkbox"] {
    display: none;
}
.custom_chk label {
    border: 1px solid #e9f8fb;
    padding: 16px;
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-box-shadow: 1px 2px 3px -2px #999;
    -moz-box-shadow: 1px 2px 3px -2px #999;
    box-shadow: 1px 2px 3px -2px #999;
        margin-top: 15px;
        margin-bottom:10px;
        background: #FDFDFD;
        font-family: 'proxima_novaregular', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-weight: normal;
}
.custom_chk label::before {
    background-color: white;
    border: 1px solid #ff6d6d;
    color: white;
    content: " ";
    display: block;
    height: 25px;
    line-height: 28px;
    position: absolute;
    right: -2px;
    text-align: center;
    top: -2px;
    transform: scale(0);
    transition-duration: 0s;
    width: 25px;
}
.custom_chk :checked+label {
    outline: 2px solid #FF6D6D;
}
.custom_chk :checked+label:before {
    content: "\2713";
    background-color: #FF6D6D;
    transform: scale(0.9);
}

<div class="form-group custom_chk">
  <div class="col-lg-10 col-md-12 col-sm-12">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-5">
        <input type="checkbox" id="hyper_self" name="hyper_self" />
        <label for="hyper_self">
          <span class="ailment_icon hyper"></span>
          <span class="ailment_text">main Item</span>
        </label>
      </div>
    </div>
  </div>
</div>