The third tab is not showing any content but the first two work fine. Not sure what is wrong as I am following this example from the jQuery website. http://demos.jquerymobile.com/1.4.1/tabs/
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>Social</title>
</head>
<script>
$(function() {
$( "#tabs" ).tabs({
collapsible: true, active: false
});
});
</script>
<body>
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
<li><a href="#three" data-ajax="false">three</a></li>
</ul>
</div>
<div id="one" style="display:none;">
<p> content one </p>
</div>
<div id="two" style="display:none;">
<p> content two </p>
</div>
<div id="three" style="display:none;">
<p> content three </p>
</div>
</div>
</body>
</html>