CODEWITHSUNDEEP
javascriptjqueryhtml
Vibeaneer
Vibeaneer

Reputation: 13

Displaying info from sidebar on the same page

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!

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.

<!doctype html>
<html>
<head>

<title>STUDENT SCHEDULER APP</title>

<link rel="stylesheet" type="text/css" href="ssaStyles.css">

<script src="jquery-3.2.1.min.js"></script>

<script>

$(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();
    }
  });

  });

    </script>

   </head>

  <body>

<div id="header">
  <h1>Welcome!</h1>
</div>

<div class="nav-right visible-xs">
  <div class="button" id="btn">
   <div class="bar top"></div>
   <div class="bar middle"></div>
   <div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>


  <nav>
    <div class="nav-right hidden-xs">
     <div class="button" id="btn">
    <div class="bar top"></div>
    <div class="bar middle"></div>
    <div class="bar bottom"></div>
    </div>
   </div>
   <!-- nav-right -->
  </nav>


</main>

 <div class="sidebar">
  <ul class="sidebar-list">
   <li class="sidebar-item"><a href="#" class="sidebar-anchor">Schedule</a>
</li>
 <li class="sidebar-item"><a href="#" class="sidebar-anchor">Progress</a>
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Add a course</a>
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a 
course</a></li>
  </ul>
 </div>

 </body>

 </html>

Upvotes: 0

Views: 2578

Answers (1)

Zayne komichi
Zayne komichi

Reputation: 535

Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.

<html>
 <head>
   <title>Example</title>
 </head>
 <body>

<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
   <a href="#about">About</a>
   <a href="#contact">Contact</a>
</div>  

<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
   <div id="about">
       <h1>Hello</h1>
   </div>   

<!--this is the contact section-->
   <div id="contact">
       <p> done</p>
   </div>

</body>
</html>

the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

Upvotes: 2

Related Questions