CSS accordion opens on click, but won't close! Help would be appreciated

Question

I've got a pure CSS accordion partly working on my site. It opens on click, however for some reason it won't close when clicked again.

I've tried lots of tweaks to try and get this sorted but nothing's helped so I'd love to know if anybody here could work it out for me.

The exact code I'm using is here on CodePen and pasted below.

.gohere-accordion {
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 4px;
    margin-right: 15px;
        width: 99%;
        color: #484848;
}
.gohere-accordion input {
    display: none;
}
.gohere-box {
    position: relative;
    background: white;
        height: 64px;
        transition: all .15s ease-in-out;
        color: #484848;
}
.gohere-box::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
gohere-header.box {
    background: #00BCD4;
        color: #484848;
    z-index: 100;
    cursor: initial;
    box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
gohere-header .gohere-box-title {
    margin: 0;
    font-weight: normal;
    font-size: 16pt;
        color: #484848;
    cursor: initial;
}
.gohere-box-title {
    width: calc(100% - 40px);
    height: 64px;
    line-height: 64px;
    padding: 0 20px;
    display: inline-block;
    cursor: pointer;
        color: #484848;
    -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.gohere-box-content {
    width: calc(100% - 40px);
    padding: 30px 20px;
    font-size: 11pt;
        color: #484848;
    color: rgba(0,0,0,.54);
    display: none;
}
.gohere-box-close {
    position: absolute;
    height: 64px;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}
input:checked + .gohere-box {
    height: auto;
    margin: 16px 0;
    box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
input:checked + .gohere-box .gohere-box-title {
    border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .gohere-box .gohere-box-content,
input:checked + .gohere-box .gohere-box-close {
    display: inline-block;
}
.arrows section .gohere-box-title {
    padding-left: 44px;
    width: calc(100% - 64px);
}
.arrows section .gohere-box-title:before {
    position: absolute;
    display: block;
    content: '\203a';
    font-size: 18pt;
    left: 20px;
    top: -2px;
    transition: transform .15s ease-in-out;
    color: rgba(0,0,0,.54);
}
input:checked + section.gohere-box .gohere-box-title:before {
    transform: rotate(90deg);
}

<nav class="gohere-accordion"><!-- THEN ONE OF THESE PER SINGLE ACCORDION --><input id="cb1" name="gohere-accordion" type="radio" />
<section class="gohere-box"><label class="gohere-box-title" for="cb1">This is a frequently asked question - opens, but won't close!</label>

<div class="gohere-box-content">Now it's open, how can I make it close on click?</div>
</section>
</nav>

Answer 1

Simply change your input element's type attribute from radio (which cannot be unclicked) to checkbox, like so:

.gohere-accordion {
  margin-top: 7px;
  margin-bottom: 7px;
  margin-left: 4px;
  margin-right: 15px;
  width: 99%;
  color: #484848;
}

.gohere-accordion input {
  display: none;
}

.gohere-box {
  position: relative;
  background: white;
  height: 64px;
  transition: all .15s ease-in-out;
  color: #484848;
}

.gohere-box::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}

gohere-header.box {
  background: #00BCD4;
  color: #484848;
  z-index: 100;
  cursor: initial;
  box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px -2px rgba(0, 0, 0, .12), 0 2px 4px -4px rgba(0, 0, 0, .24);
}

gohere-header .gohere-box-title {
  margin: 0;
  font-weight: normal;
  font-size: 16pt;
  color: #484848;
  cursor: initial;
}

.gohere-box-title {
  width: calc(100% - 40px);
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  display: inline-block;
  cursor: pointer;
  color: #484848;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.gohere-box-content {
  width: calc(100% - 40px);
  padding: 30px 20px;
  font-size: 11pt;
  color: #484848;
  color: rgba(0, 0, 0, .54);
  display: none;
}

.gohere-box-close {
  position: absolute;
  height: 64px;
  width: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  display: none;
}

input:checked+.gohere-box {
  height: auto;
  margin: 16px 0;
  box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

input:checked+.gohere-box .gohere-box-title {
  border-bottom: 1px solid rgba(0, 0, 0, .18);
}

input:checked+.gohere-box .gohere-box-content,
input:checked+.gohere-box .gohere-box-close {
  display: inline-block;
}

.arrows section .gohere-box-title {
  padding-left: 44px;
  width: calc(100% - 64px);
}

.arrows section .gohere-box-title:before {
  position: absolute;
  display: block;
  content: '\203a';
  font-size: 18pt;
  left: 20px;
  top: -2px;
  transition: transform .15s ease-in-out;
  color: rgba(0, 0, 0, .54);
}

input:checked+section.gohere-box .gohere-box-title:before {
  transform: rotate(90deg);
}

<nav class="gohere-accordion">
  <!-- THEN ONE OF THESE PER SINGLE ACCORDION --><input id="cb1" name="gohere-accordion" type="checkbox" />
  <section class="gohere-box"><label class="gohere-box-title" for="cb1">This is a frequently asked question - opens, but won't close!</label>

    <div class="gohere-box-content">Now it's open, how can I make it close on click?</div>
  </section>
</nav>