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-rol="Page"  class="BG">
<div data-role="content">

        <div data-role="collapsible-set" data-iconpos="left" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
            <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>
                    
                    <li data-icon='false'>	<font class="NameStyle"> Village6</font>

                    </li>
                    
                    <li data-icon='false'>	<font class="NameStyle"> Village7</font>

                    </li>
                    
                    <li data-icon='false'>	<font class="NameStyle"> Village8</font>

                    </li>
                    
                    <li data-icon='false'>	<font class="NameStyle"> Village9</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>
    ...

CSS

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

.BG{
    background-image: url('http://images2.layoutsparks.com/1/218610/just-ducky-dots-pinky.gif') !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
    
}

JavaScript

$(document).on('pagecreate', function () {
    $(".ui-collapsible .ui-collapsible-heading-toggle").on("click",function(e){ 
     
        var current = $(this).closest(".ui-collapsible");
        if (current.hasClass("ui-collapsible-collapsed")) 
		{
            $(".ui-collapsible-content", current).slideDown("fast", function(){
                current.trigger("collapsibleexpand");  
                $(" .ui-collapsible-content-collapsed").slideUp('fast');
                
            });
        } 
		else 
		{
            $(".ui-collapsible-content", current).slideUp("fast", function () {
			
                current.trigger("collapsiblecollapse");
            });
        }
        
        
    });
});