JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

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");
            });
        }
        
        
    });
});

$(document).on("pageshow", function(){
    SizeContent();
});
$(window).on("resize orientationchange", function(){
    SizeContent();
});

function SizeContent(){
     var screen = $.mobile.getScreenHeight();

    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);   
}