JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="content">
  
    <div data-role="collapsible"  data-iconpos="left"  data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="col" >
	<h3 ><div>Country 1</div></h3>
	
	<div data-role="collapsible-set"  data-iconpos="left"   data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="governorates"> 
	
	<div data-role="collapsible"  >
    
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;">Governorate1</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>	<font class="NameStyle">Village1</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
            <div data-role="collapsible">
                <h3 class="Mycollapsible"><div style="color:white;font-weight:normal;" >Governorate2</div></h3>
                <ul data-role="listview">
                    <li data-icon='false'>	<font class="NameStyle">Village1</font> </li>
                    <li data-icon='false'>	<font class="NameStyle"> Village2</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village3</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village4</font></li>
                    <li data-icon='false'>	<font class="NameStyle"> Village5</font></li>
                </ul>
            </div>
        </div>
    </div>
	
	<div data-role="collapsible"  data-iconpos="left"  data-collapsed-icon="carat-d"...

CSS

a {
    background:transparent !important;
}
.Mycollapsible {
    margin: 0 !important;
    background:green !important;
}

JavaScript

$(document).on('pageinit', function(){
	$("[data-role='collapsible']").collapsible({

		collapse: function( event, ui ) {
   // alert("collapse");
			$(this).children().next().slideUp(150);
		},
		expand: function( event, ui ) {
   / alert("expand");
			$(this).children().next().hide();
			$(this).children().next().slideDown(150);
		}

	});
});