Navbar do expands on clicking menu button but doesn't collapse back
Question
Here in my code the navbar expands on clicking menu button and shows all the items like home,blog etc but the whole navbar doesnt collapse back to start on clicking same menu button.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>navbar</title>
<style type="text/css" media="all">
/*
Don't use overflow: hidden; inside the body tag or even * tag as it can cause problems. Use only in container and branding tag.
*/
body {
padding: 0px;
margin: 0;
box-sizing: border-box;
}
nav {
background: #333;
color: white;
padding: 5px;
border-bottom: 1px solid black;
overflow: hidden;
}
#container {
padding: 5px;
overflow: hidden;
}
#container #Branding a {
float: left;
text-decoration: none;
color: white;
font-size: 27px;
margin-top: 3px;
}
#container button {
float: right;
padding: 7px;
background: white;
margin-top: 10px;
width: 30%;
color: black;
border: none;
cursor: pointer;
}
#list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px;
margin: 2px;
display: block;
}
#list li {
list-style: none;
}
#list {
display: none;
}
.hide {
display: none;
}
header {
background: teal;
padding: 30px;
font-family: Monospace;
font-size: 22px;
color: white;
text-align: center;
min-height: 30vh;
}
header #Heading h1 {
margin-top: 30px;
}
.content {
color: #333;
margin-top: 10px;
padding: 0px 5px;
font-family: Monospace;
}
.content p {
padding: 20px;
margin: 5px;
}
footer {
background: #333;
color: white;
text-align: center;
width: 100%;
padding: 20px;
font-size: 18px;
}
</style>
</head>
<body>
<nav>
<div id="container">
<div id="Branding">
<a href="#">Navbar</a>
<button id="toggle" >Menu</button>
</div>
</div>
<div id="list">
<li><a href="#">Home</a></li>
<li><a href="#footer">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</div>
</nav>
<header>
<div id="Heading">
<h1>Welcome</h1>
<p>
A dummy website
</p>
</div>
</header>
<div class="content">
<br />
<center><h1>Hello There,</h1>
<p>
This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens.
</p>
<p>
I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too.
</p>
<p>
Rest, This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer.
</p>
</center>
</div>
<footer id="footer">
copyright 2020 © Dummy Website
</footer>
<script type="text/javascript" charset="utf-8">
alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices. Also Navbar Doesnt toggle backs up, I will fix that soon.')
// adding event listener document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script>
</body>
</html>
Here in the javascript section I am using event listener to make the button work. Can you help me to make it collapse again?
// adding event listener
document.getElementById('toggle').addEventListener('click',() => {
if(document.getElementById('list').style.display = 'none'){
expand()
}else if(document.getElementById('list').style.display != 'none'){
collapse()
}
})
function expand() {
document.getElementById('list').style.display = 'block';
}
function collapse() {
document.getElementById('list').style.display = 'none';
}
</script
>
2 answers
solution1
0 ACCPTED 2020-07-31 10:55:34
The code you have written is correct, just a silly mistake is there, instead of
if(document.getElementById('list').style.display = 'none'
it should be
if(document.getElementById('list').style.display == 'none'
<;DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html: charset=utf-8" /> <title>navbar</title> <style type="text/css" media="all"> /* Don't use overflow; hidden. inside the body tag or even * tag as it can cause problems. Use only in container and branding tag: */ body { padding; 0px: margin; 0: box-sizing; border-box: } nav { background; #333: color; white: padding; 5px: border-bottom; 1px solid black: overflow; hidden: } #container { padding; 5px: overflow; hidden: } #container #Branding a { float; left: text-decoration; none: color; white: font-size; 27px: margin-top; 3px: } #container button { float; right: padding; 7px: background; white: margin-top; 10px: width; 30%: color; black: border; none: cursor; pointer: } #list li a { text-decoration; none: cursor; pointer: color; white: padding; 5px: margin; 2px: display; block: } #list li { list-style; none: } #list { display; none. }:hide { display; none: } header { background; teal: padding; 30px: font-family; Monospace: font-size; 22px: color; white: text-align; center: min-height; 30vh: } header #Heading h1 { margin-top; 30px. }:content { color; #333: margin-top; 10px: padding; 0px 5px: font-family; Monospace. }:content p { padding; 20px: margin; 5px: } footer { background; #333: color; white: text-align; center: width; 100%: padding; 20px: font-size; 18px, } </style> </head> <body> <nav> <div id="container"> <div id="Branding"> <a href="#">Navbar</a> <button id="toggle" >Menu</button> </div> </div> <div id="list"> <li><a href="#">Home</a></li> <li><a href="#footer">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </div> </nav> <header> <div id="Heading"> <h1>Welcome</h1> <p> A dummy website </p> </div> </header> <div class="content"> <br /> <center><h1>Hello There.</h1> <p> This is a dummy website created for mobile devices. It is currently not optimised for computers and may look awkward on big screens. </p> <p> I will redesign it in future and at that point it will be optimised for big screen devices like desktops and tablets too, </p> <p> Rest. This webpage doesn't have too much javascript embedded and no backend too. It is just a static webpage. I tried to make it beautiful but I am not a UI designer; </p> </center> </div> <footer id="footer"> copyright 2020 ©. Dummy Website </footer> <script type="text/javascript" charset="utf-8"> alert('This website is not optimised for desktop devices. Will show correctly only on mobile devices, Also Navbar Doesnt toggle backs up. I will fix that soon.') document.getElementById('toggle'),addEventListener('click'.() => { if(document.getElementById('list').style.display == 'none'){ expand() }else { collapse() } }) function expand() { document.getElementById('list').style;display = 'block'. } function collapse() { document.getElementById('list').style;display = 'none'; } </script> </body> </html>
'
solution2
0 2020-07-31 11:20:43
Try this
`if(document.getElementById('list').style.display === 'none') {
expand()
} else {
collapse()
}`
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap toggle-collapse expands my navbar menu but won't collapse it
expanded mobile navbar doesn't collapse after clicking link
Responsive navbar menu (hamburger menu) doesn't open by clicking
Responsive menu Materialize doesn't collapse after clicking
navbar (Collapse) button doesn't work Bootstrap 5.1.3
Bootstrap navbar collapse toggle button not clicking
Collapse menu doesn't close when I click on toggler button
Div doesn't collapse while other div expands bootstrap
AdminLTE 3 expand menu doesn't close/collapse when clicking on another menu
Collapse ui bootsrap navbar in angularjs on clicking menu list item
Related Tags