<h2>Radio Reset Controller</h2>
<div>
  <div>
    <h3>Minimum Implementation</h3>
    <!-- *Beginning of Minimum Implementation* -->
    <!-- Empty form connects reset button and radio inputs through the "form" attribute -->
    <form id="rrc-form"></form>
    <!-- Radio button toggles the other hidden radio button to "unchecked" -->
    <label>Show
      <input form="rrc-form" type="radio" name="rrc-group">
    </label>
    <!-- Reset button sets state of hidden radio button back to "checked" -->
    <button type="reset" form="rrc-form">Hide</button>
    <!-- Hidden input is default "checked" and placed next to the div it is controlling. -->
    <input form="rrc-form" class="hidden" type="radio" name="rrc-group" checked>
    <div class="controlled-rrc">Controlled from anywhere</div>
    <!-- *End of Minimum Implementation* -->
  </div>

  <div>
    <h3>Toggle Button</h3>

    <form id="rrc-form-2"></form>

    <div class="btn">
      <input form="rrc-form-2" type="radio" name="rrc-group" />
      <label for="rrc-cntrl-2">Toggle Show</label>
      <button type="reset" form="rrc-form-2">Toggle Hide</button>
    </div>

    <input form="rrc-form-2" class="hidden" type="radio" name="rrc-group" checked>
    <div class="controlled-rrc">Controlled from anywhere</div>
  </div>
</div>

input[name="rrc-group"]:checked + .controlled-rrc {
  display: none;
}

/* css below is not reqired for controller function. It only affects presentation.  */

.hidden {
  display: none;
}

.controlled-rrc {
  background: orange;
  padding: 0.5rem;
}

body {
  max-width: 300px;
  margin: auto;
}
body > div{
  display: grid;
  grid-columns: 1;
}
body > div > div {
  border: solid 1px;
  margin: 0 0 1rem 0;
  padding-bottom:.5rem;
  border-radius: 5px;
  text-align: center;
}
h2{
  text-align:center;
}
h3 {
  text-align: center;
  padding: 0.25rem 0 0.25rem 0;
  margin: 0 0 0.75rem 0;
  border-bottom: solid 1px;
  background: lightgreen;
}

.btn {
  position: relative;
  margin: auto;
  background: lightblue;
  width: 6rem;
  height: 1rem;
  border: solid 1px;
  border-radius: 2px;
  text-align: center;
}

.btn > label {
  margin: auto;
}
.btn > input {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.btn > button {
  display: none;
  border: none;
  background: transparent;
  margin: auto;
}
.btn > input[name="rrc-group"]:checked ~ button {
  display: block;
}
.btn > input[name="rrc-group"]:checked ~ label {
  display: none;
}
.btn > input[name="rrc-group"]:checked {
  display: none;
}