Untitled

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Demos</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="_assets/css/jqm-demos.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="js/jquery.js"></script>
    <script src="_assets/js/index.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>

    <style>

        .hiddenContent {
            display:none;
            }


    </style>

</head>
<body>
<div data-role="page" class="jqm-demos jqm-home">

    <div data-role="header" class="jqm-header">
        <h2>My App</h2>

        <a href="#" class="jqm-navmenu-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
        <a href="#" class="jqm-search-link ui-btn ui-btn-icon-notext ui-corner-all ui-icon-search ui-nodisc-icon ui-alt-icon ui-btn-right">Search</a>
    </div><!-- /header -->

    <div role="main" class="ui-content jqm-content" id="content">

        <h1>My Awesome Course</h1>

        <p><strong>This is where I have videos that teach users how awesome it is!</strong></p>


    </div><!-- /content -->

        <div data-role="panel" class="jqm-navmenu-panel" data-position="left" data-display="overlay" data-theme="a">
            <ul class="jqm-list ui-alt-icon ui-nodisc-icon">
<li data-filtertext="demos homepage" data-icon="home"><a href="#home" class="contentUpdate" data-ajax="false">Home</a></li>

<li data-role="collapsible"  data-enhanced="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false"  class="ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data-collapsed="false">
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-d">
            Chapter One<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
    </h3>
    <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true" >
        <ul>
            <li data-filtertext=""><a href="#1-1" class="contentUpdate" >Part One</a></li>
            <li data-filtertext=""><a href="#1-2" class="contentUpdate">Part Two</a></li>
        </ul>
    </li>
             </ul>
        </div><!-- /panel -->


    <!-- TODO: This should become an external panel so we can add input to markup (unique ID) -->
    <div data-role="panel" class="jqm-search-panel" data-position="right" data-display="overlay" data-theme="a">
        <div class="jqm-search">
            <ul class="jqm-list" data-filter-placeholder="Search course content..." data-filter-reveal="true">
<li data-filtertext="demos homepage" data-icon="home"><a href="#home" class="contentUpdate" data-ajax="false">Home</a></li>

<li data-role="collapsible"  data-enhanced="true" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-iconpos="right" data-inset="false"  class="ui-collapsible ui-collapsible-themed-content ui-collapsible-collapsed" data-collapsed="false">
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
        <a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-right ui-btn-inherit ui-icon-carat-d">
            Chapter 1<span class="ui-collapsible-heading-status"> click to expand contents</span>
        </a>
    </h3>
    <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true" >
        <ul>
            <li data-filtertext=""><a href="#1-1" class="contentUpdate" >Part 1</a></li>
            <li data-filtertext=""><a href="#1-2" class="contentUpdate">Part 2</a></li>
        </ul>
    </li>


            </ul>
        </div>
    </div><!-- /panel -->


</div><!-- /page -->


<div class="hiddenContent home">

<h1>My Awesome Course </h1>

        <p><strong>Here is where you tell your users about your course and why it's awesome.</strong></p>
<iframe style="width:100%" height="315" src="http://www.youtube.com/embed/ol03SH9bvVE" frameborder="0" allowfullscreen></iframe>
</div>

<div class="hiddenContent 1-1">

<iframe style="width:100%" height="315" src="http://www.youtube.com/embed/ol03SH9bvVE" frameborder="0" allowfullscreen></iframe>

<h1> Chapter 1 Part 1 </h1>
<p> This is an explanation of the video</p>

</div>

<div class="hiddenContent 1-2">


<iframe style="width:100%" height="315" src="http://www.youtube.com/embed/ol03SH9bvVE" frameborder="0" allowfullscreen></iframe>

<h1> Chapter 1 Part 2 </h1>
<p> This is an explanation of the video </p>

</div>

<script>

    function updateContent(hash) {

        var newClass = hash.substring(1);

        var newContent = $("."+newClass).html();

        $("#content").html(newContent);

    }
    if (window.location.hash) {
    updateContent(window.location.hash);

    }

    $(".contentUpdate").click(function() {

        updateContent($(this).attr("href"));
    });


</script>

</body>
</html>