Building a custom check box within a accordion

I have a basic jQuery accordion and a custom build checkbox, the accordion works well, drops and retracts on-lick.

The problem is with my checkbox on its own I can check or unchecked via clicking on the check, however within my accordion it seems to be unclickable. Does anyone know why?

$(function() {
  var icons = {
    "header": "ui-icon-plusthick",
    "activeHeader": "ui-icon-minusthick"
  };
  
  $("#accordion").accordion({
    icons: icons,
    heightStyle: "content",
    active: false,
    collapsible: true,
  });
});

.row-accord {
  display: flex;
  flex-direction: row;
}
.row-accord span {
  line-height: 36px;
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .accord-text:before {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background-color: #f5f5f5;
  border: 2px solid rgba(0, 0, 0, 0.42);
  display: block;
  margin-right: 20px;
  content: "";
  color: green;
}
input[type=checkbox]:checked + .accord-text:before {
  content: "\2713";
  text-align: center;
  vertical-align: middle;
  font-size: xx-large;
  background-color: #f1f1f1;
  border: 2px solid green;
  line-height: 36px;
  font-weight: bolder;
}

<script src="http://ift.tt/1oMJErh"></script>
<div id="accordion">
  <div class="row-accord">
    <label for=''>
      <input type='checkbox' class='singlecheck' checked/>
      <div class="accord-text"></div>
    </label>
    <span>
      title here
    </span>
  </div>
  <div>
    hidden content here
  </div>
</div>