JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role='content'>

<div class="ui-collapsible ui-collapsible-themed-content">
						<h2 class="ui-collapsible-heading">
						<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b">Employee collapsible</a>
						</h2>
						<div class="ui-collapsible-content ui-body-inherit" style="display:none;">
							<div class="ui-collapsible ui-collapsible-themed-content">
								<h2 class="ui-collapsible-heading">
								<a class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-b">
									<p class="inline">Child collapsible</p>
									<p class="inline coll_head_butt timecard ui-link ui-btn ui-btn-b ui-icon-check ui-btn-icon-notext ui-shadow ui-corner-all"></p>
								</a>
								</h2>
								<div class="ui-collapsible-content ui-body-inherit" style="display:none;">
									<ul class="ui-listview">
									<li class="projectxtask ui-li-has-count"><a class="ui-btn">li 1<span class="ui-li-count ui-body-inherit">42</span></a></li>
									<li><a class="ui-btn">li 2</a></li><li><a class="ui-btn">li 3</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
</div>

CSS

.projectxtask a{
	
	background-color:#33ccff !important;
	padding-right:2.6em !important;
	border-top:1px solid black !important;
	border-bottom:1px solid black !important;
}
.inline{display:inline !important;}


.coll_head_butt{
	margin-left : 20px !important;
	border-style:none !important;
	box-shadow:none !important;
}

JavaScript

$('.ui-collapsible-heading').on('click',function(event,ui){
	
	var coll_content = $(this).siblings();
	if(coll_content.is(":visible"))
		{$('a',this).removeClass( "ui-icon-minus" ).addClass( "ui-icon-plus" );
		coll_content.hide();}
	else
		{$('a',this).removeClass( "ui-icon-plus" ).addClass( "ui-icon-minus" );
		coll_content.show();}	
});