0
150
ViewsWhy doesn't my script open my dropdown menu?
I have this snippet of code for my personal website that uses JavaScript to activate the Hamburger menu. However, it does not work and I am not sure why. The other JS in my code works no problem.
Here is the Code:
var navbar = document.getElementById(".navbarNav");
function hideShow() {
if (navbar.style.display == "block") {
navbar.style.display = "hideShow()";
} else {
navbar.style.display = "block";
}
}<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Edward Wynman</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="projects.html">Projects</a>
<li class="nav-item">
<a class="nav-link" href="/Files/EddieReume.pdf">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>Let me know if you need anything else like the CSS or other code.
3 answers
Answer question0
Looking at your markup, are you trying to use Bootstrap? In your code I can see data attributes such as data-bs-toggle which indicate you are. If so, make sure you are using the JavaScript and CSS files needed to make this work.
With that added, it works with your code - no custom JS needed (screenshots below)
Your code working can be seen here
If you want to know how to create a custom bit of JS to trigger this, please comment and I'll update my answer accordingly.
0
Final Answer
var navbar = document.getElementById("navbarNav");
function hideShow() {
console.log("click")
if (navbar.style.display == "block") {
navbar.style.display = "none";
console.log("disapper")
} else {
navbar.style.display = "block";
console.log("visible")
}
}
0
when you are using getElementById() don't use .(dot) to defined the Id Attribute.
var navbar = document.getElementById("navbarNav");
// var navbar =document.getElementById("navbarNav"); or
// let navbar=document.querySelector('#navbarNav'); this method also work.
function hideShow() {
if (navbar.style.display == "block") {
navbar.style.display = "hideShow()";
} else {
navbar.style.display = "block";
}
}