I don't get to show the second page after the list button click. <div data-role="content"> this line of code prevents me from doing the rest run correctly.
<!-- jquery -->
<script type="text/javascript" async src="js/glyphicons/ga.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.css" />
<script src="http://code.jquery.com/mobile/1.1.2/jquery.mobile-1.1.2.min.js"></script>
<!-- jquery -->
</head>
<body>
<div data-role="page" id="page" data-theme="a">
<!-- header Starts -->
<header data-role="header"data-theme="f" class="header">
<h1> Liste app </h1>
<a href="#left-panel" data-shadow="false" ><i class="fa fa-indent fa-2x"></i></a>
</header>
<!-- header end -->
<!-- content Starts -->
<div data-role="content">
<article data-role="content">
<ul data-role="listview" >
<li>
<a href="#dog">
<h1>Hello word</h1>
<img src="images/1-th.jpg" alt="Miou miou"/>
<p> Ceci n'est pas une pipe </p>
</a>
</li>
</ul>
</article>
<div data-role="page" id="dog">
<header data-role="header">
<h1> Dog </h1>
<a href="#page">Menu</a>
</header>