JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="uSPStyle" id="uSPStyle">
	<li class="setRelative">
		<a class="tfLink clickMe current" title="Header 1" data-toggle=".tfLink1" id="current" href="javascript:void(0);"><img src="theImages/imgPlus.png" id="imgFirstM" class="imgExpCol">Header 1</a>
		<ul class="uSPStyle uSPInner" style="width: 80%; display: none;">
			<li><a class="tfLink clickMe" title="Sub-Page" data-toggle=".tf1SLink1" href="javascript:void(0);">Sub-Page</a></li>
			<li><a class="tfLink clickMe" title="test" data-toggle=".tf2SLink1" href="javascript:void(0);">test</a></li>
		</ul>
	</li>
	<li>
		<a class="tfLink clickMe" title="Header 2" data-toggle=".tfLink2" href="javascript:void(0);">Header 2</a>
		<ul class="uSPStyle uSPInner" style="width: 80%; display: none;">
			<li><a class="tfLink clickMe" title="Sub-Page" data-toggle=".tf1SLink1" href="javascript:void(0);">Sub-Page</a></li>
			<li><a class="tfLink clickMe" title="test" data-toggle=".tf2SLink1" href="javascript:void(0);">test</a></li>
		</ul>
	</li>
	<li>
		<a class="tfLink clickMe" title="Header 3" data-toggle=".tfLink3" href="javascript:void(0);">Header 3</a>
	</li>
	<li>
		<a class="tfLink clickMe" title="Header 4" data-toggle=".tfLink4" href="javascript:void(0);">Header 4</a>
	</li>
</ul>

CSS

* {
  padding: 0;
  margin: 0;
  outline: 0;
  /* text-decoration: none; */
  border: 0;
}
.hidOverflow {
  overflow: hidden;
}
.smallPadBottom {
  padding: 0 0 15px 0;
}
.setCenter {
  text-align: center;
}
.vertAlignT {
  vertical-align: top;
}
.innerDivCenter {
  margin: 0 auto;
}
ul.uSPStyle {
  list-style-type: none;
  width: 95%;
  margin: 0px;
  padding: 0px;
  margin: 0 auto;
}
ul.uSPStyle li {
  display: block;
  margin-bottom: 1px;
  background: #FFF;
  text-transform: uppercase;
  border-bottom: 1px solid #D5D5D5;
}
ul.uSPStyle li a#current, ul.uSPStyle li a:hover {
  border-left: 4px solid #E55302;
  border-right: 4px solid #E55302;
  margin-left: -4px;
  margin-right: -4px;
  color: #e67e22;
  box-sizing: border-box;
  background: #FFEEE5;
}
ul.uSPStyle li a {
  padding: 10px 20px;
  line-height: 20px;
  text-decoration: none;
  display: block;
  position: relative;
  color: #175FA0;
  margin-left: 0px;
  margin-right: 0px;
  transition: color 300ms linear;
  -o-transition: color 300ms linear;
  -ms-transition: color 300ms linear;
  -moz-transition: color 300ms linear;
  -webkit-transition: color 300ms linear;
}
a:active, a:focus, a:visited {
  color: #175FA0;
  -o-transition: color .2s ease-out, background 2s ease-in;
  -ms-transition: color .2s ease-out, background 2s ease-in;
  -moz-transition: color .2s ease-out, background 2s ease-in;
  -webkit-transition: color .2s ease-out, background 2s ease-in;
  transition: color .2s ease-out, background 2s ease-in;
  text-decoration: none;
}

JavaScript

$('.clickMe').click(function () {
				var $this = $(this);
				//alert($this);
    
                var isVisible = $this.parent().find("ul").eq(0).is(':visible');
				alert(isVisible);
    
				$this.closest("li").find("ul").slideToggle();

				var item = $this.closest("li").find("ul").is(":hidden");
				//alert(item);
				if (item) {
					console.log("no item");
				}
				else {
					console.log("item");
				}

				

				$('.clickMe').removeClass('current');

				$this.addClass('current');
			});