JSFiddle - React, Tailwind, and code Playground

HTML

<h1 id="headerSports" onclick="toggle_visibility('hiddenSports'); toggle_img('arrow')">
    Sports     <img id="arrow" src="https://pbs.twimg.com/profile_images/378800000563115809/b5bfa0c4b2e8670d09222c17856abef4.jpeg"/>
</h1>

<div id="hiddenSports" class="hiddenText">
    <h2 onclick="toggle_visibility('hiddenNetball')">Netball</h2>
      <h3 id="hiddenNetball" class="hiddenText">Netball</h3>
    <h2 onclick="toggle_visibility('hiddenFootball')">Football</h2>
      <h3 id="hiddenFootball" class="hiddenText">Football</h3>
    <h2 onclick="toggle_visibility('hiddenHockey')">Hockey</h2>
      <h3 id="hiddenHockey" class="hiddenText">Hockey</h3> 
    <h2 onclick="toggle_visibility('hiddenTennis')">Tennis</h2>
      <h3 id="hiddenTennis" class="hiddenText">Tennis</h3>
    <h2 onclick="toggle_visibility('hiddenBadminton')">Badminton</h2>
      <h3 id="hiddenBadminton" class="hiddenText">Badminton</h3>
    <h2 onclick="toggle_visibility('hiddenRugby')">Rugby</h2>
      <h3 id="hiddenRugby" class="hiddenText">Rugby</h3>
</div>

CSS

.hiddenText {
  display: none;
}
img {
  width: 50px;
  height: 50px;
}

JavaScript

var largeUnclicked = '/Images/arrow1_unclicked.png'
	var largeClicked = '/Images/arrow1_clicked.png'

function toggle_visibility(img) {

  var e = document.getElementById(img)

  if (e.style.display == 'block') {
    e.style.display = 'none'
  } else {
    e.style.display = 'block'
  }
}

function toggle_img(img) {
  var i = document.getElementById(img)
  
  if (i.src == largeUnclicked ) {
    i.src = largeClicked
  } else {
    i.src = largeUnclicked
  }
}