jquery collapsible error
Hello everyone.
I need another set of eyes to see my code cause I've spent hours trying to see where my issue is. I have a collapsible panel and the first button works fine, it goes to the page its supposed to. So I added another button and created another page but for some reason the second button won't go to its page. I'be check that the id on the button matches the id on the page, in this example its "page3". Any help is greatly appreacited. Thanks,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CS6/Configuration/Third%2 0Party%20Source%20Code/jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CS6/Configuration/Third%20 Party%20Source%20Code/jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="file:///Macintosh%20HD/Applications/Adobe%20Dreamweaver%20CS6/Configuration/Third%20 Party%20Source%20Code/jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<!--Tab information for TNP-->
<div data-role="page" data-control-title="Tabs" data-theme="a"
id="page15">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="slide" data-theme="a" href="#page1"
data-icon="back" data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Tabs
</h3>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Header
</li>
<li data-theme="a">
<a href="#page2" data-transition="slide">
Section
</a>
</li>
<li data-theme="a">
<a href="#page3" data-transition="slide">
Section
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-control-title="Section" id="page2">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="slide" href="#page15" data-icon="back"
data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Section
</h3>
</div>
<div data-role="content">
<div style="width: 288px; height: 200px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;"data-controltype="image">
<img src="images/Tiempo.png" alt="image">
</div>
<div data-controltype="textblock">
<div class="column">
<div class="ui-grid-a">
<div class="ui-block-a">
<p>1 Col = 1.5556"</p>
<p>2 Col = 3.2222"</p>
<p>3 Col = 4.8889"</p>
</div>
<div class="ui-block-b">
<p>4 Col = 6.5556"</p>
<p>5 Col = 8.2222"</p>
<p>6 Col = 9.8889"</p>
</div>
</div>
<p>2-Page Spread = 20.889" x 9.682</p>
<br>
<p>Document Size = 11" x 11"</p>
<p>Top Margin = 0.5556"</p>
<p>Top Left = 0.5556"</p>
<p>Top Right = 0.5556"</p>
<p>Top Bottom = 0.5556"</p>
<p>Gutter = 0.1111"</p>
<p>Image Area = 9.8889" x 9.682"</p>
</div>
</div>
</div>
<div data-role="page" data-control-title="Section" id="page3">
<div data-theme="a" data-role="header">
<a data-role="button" data-transition="slide" href="#page15" data-icon="back"
data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Section
</h3>
</div>
<div data-role="content">
<div style="width: 288px; height: 200px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;"data-controltype="image">
<img src="images/Tiempo.png" alt="image">
</div>
<div data-controltype="textblock">
<div class="column">
<div class="ui-grid-a">
<div class="ui-block-a">
<p>1 Col = 1.5556"</p>
<p>2 Col = 3.2222"</p>
<p>3 Col = 4.8889"</p>
</div>
<div class="ui-block-b">
<p>4 Col = 6.5556"</p>
<p>5 Col = 8.2222"</p>
<p>6 Col = 9.8889"</p>
</div>
</div>
<p>2-Page Spread = 20.889" x 9.682</p>
<br>
<p>Document Size = 11" x 11"</p>
<p>Top Margin = 0.5556"</p>
<p>Top Left = 0.5556"</p>
<p>Top Right = 0.5556"</p>
<p>Top Bottom = 0.5556"</p>
<p>Gutter = 0.1111"</p>
<p>Image Area = 9.8889" x 9.682"</p>
</div>
</div>
</div>
</body>
</html>