Radio onclick function not triggering because of another function - javascript

Question

So the first function displays the div of a linked radio button, each radio displays a separate div. Hiding the div with a reclick of the same radio. The other function is a long winded workaround I found on stack overflow which makes radio buttons deselectable from here.

Both work as they're meant to individually, but when I put them in the same code, only the deselecting of radio buttons work. How can I get them to work in tandem with one another?

Thanks in advance!

function toggle_tab(id) {
  const target = document.getElementById(id);

  if (!target) return;

  const divs = document.querySelectorAll('.clickedTab');
  for (const div of divs) {
    if (div !== target || target.style.display === 'block') {
      div.style.display = 'none';
    } else {
      target.style.display = 'block';
    }
  }
}

function deselectRadio(rootElement) {
  if (!rootElement) rootElement = document;
  if (!window.radioChecked) window.radioChecked = {};
  window.radioClick = function(e) {
    const obj = e.target,
      name = obj.name || "unnamed";
    if (e.keyCode) return obj.checked = e.keyCode != 32;
    obj.checked = window.radioChecked[name] != obj;
    window.radioChecked[name] = obj.checked ? obj : null;
  }
  rootElement.querySelectorAll("input[type='radio']").forEach(radio => {
    radio.setAttribute("onclick", "radioClick(event)");
    radio.setAttribute("onkeyup", "radioClick(event)");
  });
}
deselectRadio();

#radioWrapper {
  flex-direction: row;
  left: 0%;
  width: 100%;
  float: left;
  box-sizing: border-box;
  text-align: center;
  z-index: 1;
  background: transparent;
}

#tabOne {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: blue;
}

#tabTwo {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: red;
}

#tabThree {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: green;
}

#tabFour {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: yellow;
}

#tabFive {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: purple;
}

#tabSix {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: orange;
}

#tabSeven {
  position: absolute;
  width: 15%;
  right: 10%;
  padding: 3.125rem 0;
  border-radius: 0.75rem;
  text-align: center;
  border-style: solid;
  border-color: cyan;
}

.radio-button {
  width: 60px;
  height: 60px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: transparent;
  border-color: darkgray;
  border-style: solid;
}

input {
  display: none;
}

input:checked+label {
  width: 60px;
  background-color: yellow;
  box-shadow: 0 0 0 1px gold;
  border-style: solid;
}

label {
  display: inline-block;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label img {
  width: 100%;
  height: 100%;
}

.imageTag {
  pointer-events: none;
}

<div id="radioWrapper">
  <div class="radio-button">
    <input type="radio" name="tabRadio" id="tab-one" onclick="toggle_tab('tabOne')" />
    <label for="tab-one">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-two" name="tabRadio" onclick="toggle_tab('tabTwo')" />
    <label for="tab-two">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-three" name="tabRadio" onclick="toggle_tab('tabThree')" />
    <label for="tab-three">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-four" name="tabRadio" onclick="toggle_tab('tabFour')" />
    <label for="tab-four">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-five" name="tabRadio" onclick="toggle_tab('tabFive')" />
    <label for="tab-five">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-six" name="tabRadio" onclick="toggle_tab('tabSix')" />
    <label for="tab-six">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
  <div class="radio-button">
    <input type="radio" id="tab-seven" name="tabRadio" onclick="toggle_tab('tabSeven')" />
    <label for="tab-seven">
                <img src=".svg" class="imageTag" height="60px" width="60px">
            </label>
  </div>
</div>



<div id="tabOne" class="clickedTab" style="display: none;">
  Tab One
</div>

<div id="tabTwo" class="clickedTab" style="display: none;">
  Tab Two
</div>

<div id="tabThree" class="clickedTab" style="display: none;">
  Tab Three
</div>

<div id="tabFour" class="clickedTab" style="display: none;">
  Tab Four
</div>

<div id="tabFive" class="clickedTab" style="display: none;">
  Tab Five
</div>

<div id="tabSix" class="clickedTab" style="display: none;">
  Tab Six
</div>

<div id="tabSeven" class="clickedTab" style="display: none;">
  Tab Seven
</div>