title: How to load HTML page in DIV of the same page when clicking the menu list?
body: <p>I am trying to convert an html5 example I saw from the web but I am having trouble making the href to load on the same page in the container section, instead of loading into a new page. 
  I added a jquery script to override the default behaviour of the href and load it to the div but still doesn't seem to work. Below is my HTML and JS codes.</p>
  
  <p><strong>INDEX.HTML</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html &gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;MY PROJECT&lt;/title&gt;
  
  
          &lt;link rel="stylesheet" href="css/normalize.css"&gt;
  
          &lt;link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'&gt;
  
              &lt;link rel="stylesheet" href="css/style.css"&gt;
  
        &lt;/head&gt;
  
        &lt;body&gt;
  
              &lt;div id="wrapper"&gt;
              &lt;div class="overlay"&gt;&lt;/div&gt;
  
              &lt;!-- Sidebar --&gt;
              &lt;nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"&gt;
                  &lt;ul class="nav sidebar-nav"&gt;
                      &lt;li class="sidebar-brand"&gt;
                          &lt;a href="#"&gt;
                             MY PROJECT
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-fw fa-home"&gt;&lt;/i&gt; Back to Home&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="1.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="2.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="3.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="4.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 4&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="5.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 5&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="6.html"&gt;&lt;i class="fa fa-fw fa-cog"&gt;&lt;/i&gt; HTML 6&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="fa fa-fw fa-plus"&gt;&lt;/i&gt; ADVANCE &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li class="dropdown-header"&gt;Advance&lt;/li&gt;
                          &lt;li&gt;&lt;a href="advance.html"&gt;chart mod a&lt;/a&gt;&lt;/li&gt;
  
                        &lt;/ul&gt;
                      &lt;/li&gt;
  
                      &lt;li&gt;
                          &lt;a href="#"&gt;&lt;i class="fa fa-fw fa-dropbox"&gt;&lt;/i&gt; SLIDE SHOW MODE&lt;/a&gt;
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;!-- /#sidebar-wrapper --&gt;
  
              &lt;!-- Page Content --&gt;
              &lt;div id="page-content-wrapper"&gt;
                &lt;button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas"&gt;
                  &lt;span class="hamb-top"&gt;&lt;/span&gt;
                  &lt;span class="hamb-middle"&gt;&lt;/span&gt;
                  &lt;span class="hamb-bottom"&gt;&lt;/span&gt;
                &lt;/button&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-lg-8 col-lg-offset-2"&gt;
                              &lt;h1 class="page-header"&gt;Reports Control&lt;/h1&gt;  
                              &lt;p class="lead"&gt;(BETA) &lt;/p&gt;
                              &lt;p&gt;Use nav side bar to select report ...&lt;/p&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /#page-content-wrapper --&gt;
  
          &lt;/div&gt;
          &lt;!-- /#wrapper --&gt;
          &lt;script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
      &lt;script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'&gt;&lt;/script&gt;
  
  &lt;script src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>INDEX.JS</strong></p>
  
  <pre><code> $(document).ready(function () {
    var trigger = $('.hamburger'),
        overlay = $('.overlay'),
       isClosed = false;
  
      trigger.click(function () {
        hamburger_cross();      
      });
  
      function hamburger_cross() {
  
        if (isClosed == true) {          
          overlay.hide();
          trigger.removeClass('is-open');
          trigger.addClass('is-closed');
          isClosed = false;
        } else {   
          overlay.show();
          trigger.removeClass('is-closed');
          trigger.addClass('is-open');
          isClosed = true;
        }
    }
  
    $('[data-toggle="offcanvas"]').click(function () {
          $('#wrapper').toggleClass('toggled');
    });
  
    $('#wrapper').on('click', function (e) {
              e.preventDefault();
              var page = $(this).attr('href');
              $('#page-content-wrapper').load(page);
    });
  
  });
  </code></pre>