Reputation: 29
<!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.
Upvotes: 2
Views: 1662
Reputation: 935
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()");
}
Upvotes: 0
Reputation: 4659
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>
Upvotes: 1
Reputation:
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>
Upvotes: 0
Reputation: 149
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()");
Upvotes: 0
Reputation: 1537
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>
Upvotes: 0
Reputation: 15867
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()"
Upvotes: 0