I want to close this side bar by clicking same button

user_14198772 0
Viewed 318

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<style>
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.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;
}

/* 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;}
}
</style>
</head>
<body>

<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  
      
      
     <ul class="list-unstyled">
        <li>
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
      Home</a>

            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li><a href="#">Home 1</a></li>
                <li><a href="#">Home 2</a></li>
                <li><a href="#">Home 3</a></li>
            </ul>
        </li>
    </ul>
      
</div>

<div id="main">
  <button class="openbtn" onclick="openNav()">☰ Sidebar</button>  
</div>

<script>
function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
}
</script>
   
</body>
</html>

The sidebar opens the contents when I click the button, and it closes the sidebar when I click the x mark placed at right to in the sidebar. However I want to close this sidebar using same button when I used to open. However I also want to keep the x mark in the sidebar. I have idea that if the sidebar is opened it can be closed by clicking same button.

css html javascript
6 Answers

try this,

Here toggleclass() used to toggle open class while clicking both of one ☰ Sidebar or x button.

Add new style in css

#mySidebar.open{ width:250px; }
#main.open{ margin-left:250px; }

Add change in html code

In both of click() event call OpenOrClose() function.

 <a href="javascript:void(0)" class="closebtn text-white" onclick="OpenOrClose()">×</a> 
 <button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>

Result:

function OpenOrClose() {
  document.getElementById("mySidebar").classList.toggle("open");
  document.getElementById("main").classList.toggle("open");
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.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;
}

/* 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;}
}

#mySidebar.open{width:250px;}
#main.open{margin-left:250px;}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>

</style>
</head>
<body>

<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn text-white" onclick="OpenOrClose()">×</a>
      
     <ul class="list-unstyled bg-info text-white">
        <li>
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed text-white">
      Home</a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li><a href="#" class="text-white">Home 1</a></li>
                <li><a href="#" class="text-white">Home 2</a></li>
                <li><a href="#" class="text-white">Home 3</a></li>
            </ul>
        </li>
        <li><a href="#homeSubmenu" class="text-white">About</a></li>
        <li><a href="#homeSubmenu" class="text-white">Blog</a></li>
    </ul>
      
</div>

<div id="main">
  <button class="openbtn" onclick="OpenOrClose()">☰ Sidebar</button>  
</div>
   
</body>
</html>

user_133686580

Toggle a class instead of change the style properties and doing this you only need a single function, so I called it toggleNav.

New CSS:

#mySidebar.active{
 width: 250px;
}

#main.active{
 margin-left: 250px;
}

New Javascript:

function toggleNav() {
  document.getElementById("mySidebar").classList.toggle("active");
  document.getElementById("main").classList.toggle("active");
}

Update your HTML by replacing all of your onclicks with: onclick="toggleNav()"

user_36842650

Just add a little (and easy) javascript to change the attribute.

In the openNav() function, add a line which turns the onclick to closeNav(). Also, add an id to the button so that you will be able to change the attribute, specific for the button you want.

<button id="btn123" class="openbtn" onclick="openNav()">☰ Sidebar</button>
<!-- adding id -->

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("btn123").setAttribute("onclick", "closeNav()");
  // add this line to set the attribute

}

and also do the opposite: in the closeNav() function, set the onclick attribute to openNav() like this:

document.getElementById("btn123").setAttribute("onclick", "openNav()");
user_141847360

use js toggle function

add class toggleBtn anywhere do you want .. it will work...

document.querySelectorAll(".toggleBtn").forEach(function(el){
 el.addEventListener('click',function(e){
 e.preventDefault();
    document.getElementById("mySidebar").classList.toggle('width');
    document.getElementById("main").classList.toggle('margin');
    })
 })
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.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;
}
.width{
  width: 250px;
 
}
.margin{
   margin-left:250px;
}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="openbtn toggleBtn" >×</a>
  
      
      
     <ul class="list-unstyled">
        <li>
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
      Home</a>

            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li><a href="#">Home 1</a></li>
                <li><a href="#">Home 2</a></li>
                <li><a href="#">Home 3</a></li>
            </ul>
        </li>
    </ul>
      
</div>

<div id="main">
  <button class="openbtn toggleBtn" >☰ Sidebar</button>  
</div>

user_115543260

You can do what @imvain2 said.

Or you can do what @php123 said: change the value of onclick property to "closeNav()" when it is clicked to open, and change it to "openNav()" when it is clicked to close.

Let's say your button has id="sideBarBtn"

then,

function openNav() {
  document.getElementById("mySidebar").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  //extra line down here
  document.getElementById("sideBarBtn").setAttribute("onclick" , "closeNav()");
}

function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  //extra line down here
  document.getElementById("sideBarBtn").setAttribute("onclick" , "openNav()");
}
user_125953720

You can do this without the usage of a helper class in this situation, and by merging both functions into one function named manageNav(). Here is an example:

function manageNav() {
  document.getElementById("mySidebar").style.width == "0px" || document.getElementById("mySidebar").style.width == 0 ? document.getElementById("mySidebar").style.width = "250px" : document.getElementById("mySidebar").style.width = "0px";
  document.getElementById("main").style.marginLeft == "0px" || document.getElementById("main").style.marginLeft == 0 ? document.getElementById("main").style.marginLeft = "250px" : document.getElementById("main").style.marginLeft = "0px";
}
body {
  font-family: "Lato", sans-serif;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidebar a:hover {
  color: #f1f1f1;
}

.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.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;
}


/* 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;
  }
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div id="mySidebar" class="sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="manageNav()">×</a>



  <ul class="list-unstyled">
    <li>
      <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed">
      Home</a>

      <ul class="collapse list-unstyled" id="homeSubmenu">
        <li><a href="#">Home 1</a></li>
        <li><a href="#">Home 2</a></li>
        <li><a href="#">Home 3</a></li>
      </ul>
    </li>
  </ul>

</div>

<div id="main">
  <button class="openbtn" onclick="manageNav()">☰ Sidebar</button>
</div>

Admin1
Related