JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#" id="clickable"><div class="show_hide_main_sub_menu down_arrow"></div></a>

CSS

.down_arrow {
  background-image:url('https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png');
  background-size:contain;
  background-repeat:no-repeat;
  height:20px;
  width:20px;
}
.up_arrow {
  background-image:url('https://cdn.pixabay.com/photo/2013/07/13/09/50/arrow-156118_960_720.png');
  background-size:contain;
  background-repeat:no-repeat;
  height:20px;
  width:20px;
}

JavaScript

$(document).ready(function() {
	$("#clickable").click(function() {
  	var target = $(this).children(".show_hide_main_sub_menu");
  	if (target.hasClass("down_arrow")) {
    	target.removeClass("down_arrow");
      target.addClass("up_arrow");
    } else if (target.hasClass("up_arrow")) {
    	target.removeClass("up_arrow");
      target.addClass("down_arrow");
    }
  })
})