JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png" alt="Image Down" id="toggleArrow" />
<div class="displayBlock">
    <p>Hey, there i am display block</p>
    <p>I get toggle on Arrow clicks</p>
</div>

CSS

#toggleArrow {
    float:right;
    margin-right:40px;
}
img {
    width:20px;
    height:30px;
    cursor:pointer;
}
.displayBlock {
    position:absolute;
    top:100px;
    right:15px;
    padding:10px;
    background:#ccc;
}

JavaScript

$(".displayBlock").hide();
$('#toggleArrow').click(function () {
  var imageElement = document.getElementById('toggleArrow');
  if (imageElement.src.indexOf("https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png") != -1) {
      $("#toggleArrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Up.png");
  } else {
	  $("#toggleArrow").attr("src", "https://cdn3.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png");
  }
  $('.displayBlock').toggle("slow");
});