Html Question posted in
Some basic documentation can be found here.

Html – Toggling a sidebar with css classes and js

I’ve been struggling with this for a while, and googling outrageously has brought me thus far.
I’ve generated a page, and despite my script, I can’t get the sidebar to disappear.
See the following

html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}

#sidebar.hidden {
  display: hidden;
}

content {
  grid-area: content;
}

#footer {
  grid-area: footer;
  background-color: white;
}

h1 {
  color: #330099;
}

h2 {
  color: #330099;
}

h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

a:hover {
  background-color: #06C
}
<!DOCTYPE HTML>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="wvv_grid.css" type="text/css">
  <title>
    Test page for toggling menu
  </title>

</head>

<body>
  <div id="body">
    <div id="menubtn">
      <button id="Button" onclick="myFunc()">Toggle menu</button> </div>
    <div id="header">
      <h1>Welcome to my test page</h1>
    </div>
    <div id="sidebar" ,>
      <ul>
        <li>this</li>
        <li>item</li>
        <li>tests</li>
        <li>the</li>
        <li>button</li>
      </ul>
    </div>
    <div id="content">
      <h2>welcome again!</h2>
      <p>this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
    </div>
  </div>

  <script defer="true">
    function myFunc() {
      let sb = document.getElementById("#sidebar");
      sb.classList.toggle("hidden");
    }
  </script>
</body>

</html>

I’m confused over a couple of things which may help point any help in the right direction. Not sure if my hidden class is correctly defined. Further to this, you’ll notice I’ve not used semantic tags. what do I need to change to make this happen?
Many thanks.

Tags:

2

Answers


  1. 0
    • Use hash (ID) # when using document.querySelector("#sidebar"), not when using document.getElementById("sidebar") << no #
    • #sidebar.hidden {display: hidden;} should be display: none;
    • avoid using inline on* handlers. Use addEventListener() instead like i.e: document.querySelector("#Button").addEventListener("click", toggleSidebar);
    • name your functions descriptively, same goes for variables like sb, such might add a huge cognitive load when your code becomes larger
    • in CSS content { should be #content {
    • in HTML <div id="sidebar" ,> should be <div id="sidebar">
    html {
  margin-left: 0;
  margin-top: 0;
}

table,
th,
td {
  border: 1px solid;
}

a:hover {
  background-color: #06C
}

#body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 300px auto;
  grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
  grid-area: menubtn;
  position: sticky;
  top: 0;
  height: 3rem;
}

#header {
  grid-area: header;
  background-color: white;
  position: sticky;
  top: 0;
  height: 3rem;
}

#sidebar {
  grid-area: sidebar;
  background-color: white;
  position: sticky;
  height: calc(100vh -3rem);
  align-self: start;
}

#sidebar.hidden {
  display: none;
}

#footer {
  grid-area: footer;
  background-color: white;
}

h1, h2, h3 {
  color: #330099;
}

a:link,
a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 3px;
  text-decoration: none
}

#content {
  grid-area: content;
}

#content a:link {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}

#content a:visited {
  color: #FFF;
  font-weight: bold;
  background-color: #09F;
  border: 1px solid #0066cc;
  padding: 1px;
  text-decoration: none
}
    <!DOCTYPE HTML>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Test page for toggling menu
  </title>
</head>

<body>
  <div id="body">
    <div id="menubtn">
      <button id="Button" type="button">Toggle menu</button>
    </div>
    <div id="header">
      <h1>Welcome to my test page</h1>
    </div>
    <div id="sidebar">
      <ul>
        <li>this</li>
        <li>item</li>
        <li>tests</li>
        <li>the</li>
        <li>button</li>
      </ul>
    </div>
    <div id="content">
      <h2>welcome again!</h2>
      <p>this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
    </div>
  </div>

  <script>
    const elSidebar = document.getElementById("sidebar");
    const elButton = document.getElementById("Button");
    
    const toggleSidebar = () => {
      elSidebar.classList.toggle("hidden");
    };
    elButton.addEventListener("click", toggleSidebar);
  </script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    There are lots of ways you can achieve this effect.

    Here is just one example.

    In the example I have applied the CSS transition not only to the sidebar (the <aside> element) but also to the <main> element, so that the content area is expanded when the menu is hidden.

    Working Example:

    const menuButton = document.querySelector('.menuButton');
const sidebar = document.querySelector('aside');

const toggleSidebar = () => {
  sidebar.classList.toggle('hidden');
}

menuButton.addEventListener('click', toggleSidebar);
    header {
  position: absolute;
  inset: 0 0 0 180px;
  display: block;
  height: 60px;
  padding-left: 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 127, 0);
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 60px;
}

.menuButtonSection {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 180px;
  height: 60px;
  box-sizing: border-box;
  background-color: rgb(255, 0, 0);
}

.menuButton {
  display: block;
  margin: 18px auto;
  cursor: pointer;
}

aside {
  position: absolute;
  top: 60px;
  left: 0;
  display: block;
  width: 180px;
  height: calc(100vh - 60px);
  background-color: rgb(255, 127, 0);
  transition: left 0.4s linear;
}

main {
  position: absolute;
  top: calc(60px + 12px);
  left: calc(180px + 12px);
  display: block;
  transition: left 0.4s linear;
}

aside.hidden {
  left: -180px;
}

aside.hidden + main {
  left: 12px;
}
    <header>
  <h1>Welcome to my Test Page</h1>
</header>

<section class="menuButtonSection">
  <button type="button" class="menuButton">Toggle menu</button>
</section>

<aside>
  <nav>
    <ul>
      <li>this</li>
      <li>item</li>
      <li>tests</li>
      <li>the</li>
      <li>button</li>
    </ul>
  </nav>
</aside>  

<main>
  <h2>Welcome Again!</h2>
  <p>This page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.</p>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search