Problem hide and show data-role = "page"

Problem hide and show data-role = "page"

Hi!
I have a problem I can not solve for several days.


I have an application where I use jquery mobile. The problem is I'm trying to hide a data-role = "page" and display another, but when I show the other does not work jquery mobile (styles).


Demo of my application: http://www.creanet.com.ar/jquery/index_limpio.html (please click on m1 or m2 and looks like the header disappears and does not work eg the data-role = "collapsible")


My code: 


  1. <html>
<head>
	<title>Catálogo Messier</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	
	<!-- CSS -->
	<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
	<style>
		img.fullscreen {
			max-width: 100%;
		}		
	</style>
	
	<!-- JS -->
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.1.min.js"></script>
	
	<script type="text/javascript">
		$(function()
		{
			$("#listview_jquery  li  a").click(function() {
				var idsec = $(this).attr('id');
				idsec = idsec.substr(1);
				$('#home').fadeOut(800);
				$('#'+idsec).fadeIn(800);
			})
		});
	</script>
</head>
<body id="pagina_entera">
<div data-role="page" id="home" class="estilo_entero" data-theme="c" >
	<header data-role="header" >
		<h1>Catálogo Messier</h1>
		<a href="#info" data-icon="info" data-iconpos="notext">Info</a>
		<a data-icon="gear" data-iconpos="notext" id="nocturno" >Nocturno</a>
	</header>
	<article data-role="content">
		<ul data-role="listview"  data-filter="true" id="listview_jquery" >
			<li>
				<a id="sm1">
					<img src="imagenes/miniatura/m1.jpg" alt="" />
					<h2>M1</h2>
					<p>Nebulosa del Cangrejo, NGC 1952 </p>
				</a>
			</li>
			<li>
				<a id="sm2">
					<img src="imagenes/miniatura/m2.jpg" alt="" />
					<h2>M2</h2>
					<p>NGC 7089</p>		
				</a>
			</li>
		</ul>
	</article>
</div>

<!-- M1 -->
<div data-role="page" id="m1">
	<header data-role="header">
		<h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M1, Nebulosa del Cangrejo, NGC 1952 </h1>
		<a href="#home" data-icon="back" data-iconpos="notext">Home</a>
	</header>
	<img src="imagenes/grandes/m1.jpg" class="fullscreen" />
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
		<div data-role="collapsible">
			<h3>Características</h3>
			<p>
				<div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
				<b>Nombre:</b> M1</br />
			</p>
		</div>
		<div data-role="collapsible">
			<h3>Observación</h3>
			<p>
				texto
			</p>
		</div>
		<div data-role="collapsible">
			<h3>Localización</h3>
			<p>
				textotextotexto
				<img src="imagenes/localizacion/m1.jpg" alt=""  class="fullscreen"/>
			</p>
		</div>
	</div>
</div>

<!-- M2 -->
<div data-role="page" id="m2">
	<header data-role="header">
		<h1 style="width: 310px; margin-left: auto; margin-right: auto; padding-left: 30px;">M2, Cúmulo globular en Aquarius, NGC 7089 </h1>
		<a href="#home" data-icon="back" data-iconpos="notext">Home</a>
	</header>
	<img src="imagenes/grandes/m2.jpg" class="fullscreen" />
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
		<div data-role="collapsible">
			<h3>Características</h3>
			<p>
				<div style="background: #7BDAFF; padding: 2px 0px 2px 10px;">Denominación</div>
				<b>Nombre:</b> M2</br />
			</p>
		</div>
		<div data-role="collapsible">
			<h3>Observación</h3>
			<p>
				texto
			</p>
		</div>
		<div data-role="collapsible">
			<h3>Localización</h3>
			<p>
				textotextotexto
				<img src="imagenes/localizacion/m1.jpg" alt=""  class="fullscreen"/>
			</p>
		</div>
	</div>
</div>
</body>
</html>
Any help?.
Daniela.