Toggle sidebar visibility with a button click

Question

Toggle sidebar visibility with a button click

Currently, I am working on a sidebar that can collapse and expand when a button is clicked.

If you wish to take a look, I have created a JSFiddle for reference: https://jsfiddle.net/4er26xwp/1/

The challenge I am facing lies here:

document.getElementsByClassName("spanclass").setAttribute("style","opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");

My goal is to adjust the opacity of all spanClasses simultaneously upon clicking the button. The intention is to make the spans visible when the sidebar expands and hidden when it collapses. What could be causing the issue?

UPDATE: I discovered that by executing the following line of code: document

.getElementsByClassName("spanclass")[1].setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");

it successfully changed the opacity for one of the spans. However, I am now wondering how I can achieve the same effect for all spans at once.

javascript html css

Answer 1

Answer №1

Try using document.querySelectorAll instead of document.getElementsByClassName . Then you can loop through all classes and apply the desired style, like this:

Alternatively, you can still use document.getElementsByClassName and execute the same loop.

var open = false;

function navAction() {

if (open == true) {
open = false;
var s = document.getElementById("sidebar");
s.className -= " w160";
document.getElementById("main-container").style.marginLeft = "60px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");
    }
}

else if (open == false) {
open = true;
var s = document.getElementById("sidebar");
s.className += " w160";
document.getElementById("main-container").style.marginLeft = "160px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
    }
  }
}

body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
}

#main-container {
  margin-left: 60px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}
  
#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  /*
  transition: all .3s ease-in-out;
  */
  overflow: hidden;
}
#sidebar img {
  /*
  width: 60%;
  */
  width: 50px;
  height: auto;
  display: block;
  margin-left: 3px;
  margin: 0 auto;
}    
#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 20px;
  color: #000000;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
  width: 60px;
  white-space: nowrap;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar a span {
  opacity: 0;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar.w160:hover a span {
  opacity: 0.2!important;
}
#sidebar.w160 a:hover span {
  opacity: 1!important;
}
#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
  width: 160px;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
  width: auto;
}
  
#sidebar a.active {
  background: #e6e6e6;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.w160{
  width:160px!important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="main-container">
<div id="sidebar">
<a href="newsale.php">➕<span class="spanclass">New Sale</span></a>
<a class="active" href="#">🏠<span class="spanclass">Home</span></a>
<a href="sales.php">🙋‍♂<span class="spanclass">My Sales</span></a>
<a href="account.php">🔧<span class="spanclass">Account</span></a>
<a href="logout.php">🚪<span class="spanclass">Log Out</span></a>
</div>

<div id="main">
  <button class="openbtn" onclick="navAction()">☰ Open Sidebar</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</div>
</body>
</html>

Answer 2

Try using document.querySelectorAll instead of document.getElementsByClassName . Then you can loop through all classes and apply the desired style, like this:

Alternatively, you can still use document.getElementsByClassName and execute the same loop.

var open = false;

function navAction() {

if (open == true) {
open = false;
var s = document.getElementById("sidebar");
s.className -= " w160";
document.getElementById("main-container").style.marginLeft = "60px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:0; -moz-opacity:0; filter:alpha(opacity=0)");
    }
}

else if (open == false) {
open = true;
var s = document.getElementById("sidebar");
s.className += " w160";
document.getElementById("main-container").style.marginLeft = "160px";
document.getElementById("main-container").style.transition = "all 0.2s";
var spanclass = document.querySelectorAll(".spanclass");
for (var i = 0; i < spanclass.length; i++) {
        spanclass[i].setAttribute("style","opacity:1; -moz-opacity:1; filter:alpha(opacity=100)");
    }
  }
}

body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
}

#main-container {
  margin-left: 60px; /* Same as the width of the sidenav */
  padding: 0px 10px;
}
  
#sidebar {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: #fff;
  border-right: 1px solid #ddd;
  /*
  transition: all .3s ease-in-out;
  */
  overflow: hidden;
}
#sidebar img {
  /*
  width: 60%;
  */
  width: 50px;
  height: auto;
  display: block;
  margin-left: 3px;
  margin: 0 auto;
}    
#sidebar a {
  text-decoration: none;
  display: block;
  padding: 20px 20px;
  color: #000000;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial;
  width: 60px;
  white-space: nowrap;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar a span {
  opacity: 0;
  /*
  transition: all .2s ease-in-out;
  */
}
#sidebar.w160:hover a span {
  opacity: 0.2!important;
}
#sidebar.w160 a:hover span {
  opacity: 1!important;
}
#sidebar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: black !important;
  width: 160px;
}

#sidebar a:hover,
#sidebar a.active {
  text-decoration: none;
  background: #f5f5f5;
  color: black;
  width: auto;
}
  
#sidebar a.active {
  background: #e6e6e6;
}

.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.w160{
  width:160px!important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="main-container">
<div id="sidebar">
<a href="newsale.php">➕<span class="spanclass">New Sale</span></a>
<a class="active" href="#">🏠<span class="spanclass">Home</span></a>
<a href="sales.php">🙋‍♂<span class="spanclass">My Sales</span></a>
<a href="account.php">🔧<span class="spanclass">Account</span></a>
<a href="logout.php">🚪<span class="spanclass">Log Out</span></a>
</div>

<div id="main">
  <button class="openbtn" onclick="navAction()">☰ Open Sidebar</button>  
  <h2>Collapsed Sidebar</h2>
  <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
</div>
</body>
</html>

Toggle sidebar visibility with a button click

Answer №1

Similar questions

Troubleshooting jQuery Sortable Issue with Table and Row Width in ASP.NET MVC View

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

The detected coordinates are offset from the location of the mouse click

Unable to use innerHTML function on Blogger platform

Using Jquery to loop through a function for every select box that is added dynamically

What is the best way to paginate a dynamically updated data table using AJAX in Laravel?

ng-enter animation not working for ui-view nested within another ui-view after page reload

Incorporating FaceBook into a PhoneGap Application

Submitting quiz responses through a PHP based form

Any methods for integrating js.erb files in Ruby on Rails 7?

Upon returning to the website homepage from another page, the JavaScript animation ceases

What is the best way to implement a front-end CSS style for text instead of a background style?

How can we replicate user input in React for unit testing purposes?

What are some ways to integrate the features of ctype.h into JavaScript?

Include a CSS file from an external JavaScript file

"Learn how to position a div element below the header div and above the footer div while maintaining full height in

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

When using Selenium with Java, interacting with checkboxes produces varying results compared to manually clicking on them

Ways to determine if a website is being accessed from a mobile device or a computer without relying on TeraWurfl technology

The filter function in Material UI data grid does not seem to be functioning properly when using the renderCell method