title: Displaying info from sidebar on the same page
body: <p>I am a beginner at this stuff, and right now I am working on a project.  To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course).  I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on.  I want this information to display on the same page, not link to another page.  I have done this before by having invisible pages and using a showpage function.  This time around though it is coded differently with classes, and I'm not sure how to go about this.  Any help is appreciated!</p>
  
  <p>Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now.  To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;title&gt;STUDENT SCHEDULER APP&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="ssaStyles.css"&gt;
  
  &lt;script src="jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $(function() {
    console.log("jQuery was loaded");
  });
  
  $(document).ready(function() {
  
    function toggleSidebar() {
      $(".button").toggleClass("active");
      $("main").toggleClass("move-to-left");
      $(".sidebar-item").toggleClass("active");
    }
  
    $(".button").on("click tap", function() {
      toggleSidebar();
    });
  
    $(document).keyup(function(e) {
      if (e.keyCode === 27) {
        toggleSidebar();
      }
    });
  
    });
  
      &lt;/script&gt;
  
     &lt;/head&gt;
  
    &lt;body&gt;
  
  &lt;div id="header"&gt;
    &lt;h1&gt;Welcome!&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div class="nav-right visible-xs"&gt;
    &lt;div class="button" id="btn"&gt;
     &lt;div class="bar top"&gt;&lt;/div&gt;
     &lt;div class="bar middle"&gt;&lt;/div&gt;
     &lt;div class="bar bottom"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- nav-right --&gt;
  &lt;main&gt;
  
  
    &lt;nav&gt;
      &lt;div class="nav-right hidden-xs"&gt;
       &lt;div class="button" id="btn"&gt;
      &lt;div class="bar top"&gt;&lt;/div&gt;
      &lt;div class="bar middle"&gt;&lt;/div&gt;
      &lt;div class="bar bottom"&gt;&lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;!-- nav-right --&gt;
    &lt;/nav&gt;
  
  
  &lt;/main&gt;
  
   &lt;div class="sidebar"&gt;
    &lt;ul class="sidebar-list"&gt;
     &lt;li class="sidebar-item"&gt;&lt;a href="#" class="sidebar-anchor"&gt;Schedule&lt;/a&gt;
  &lt;/li&gt;
   &lt;li class="sidebar-item"&gt;&lt;a href="#" class="sidebar-anchor"&gt;Progress&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="sidebar-item"&gt;&lt;a href="#" class="sidebar-anchor"&gt;Add a course&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="sidebar-item"&gt;&lt;a href="#" class="sidebar-anchor"&gt;Drop a 
  course&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  
   &lt;/body&gt;
  
   &lt;/html&gt;
  </code></pre>