May 18, 2022 5:56 PM
Trying to create a hamburger menu but the HTML is not reading my onclick. This is my button:
<button
class="dropbtn-mobile"
onclick="toggleMenu()">
And my js:
function toggleMenu() {
console.log('hello');
var menuBox = document.getElementById('dropdown-content-mobile');
if(dropdown-content-mobile.style.display == "block") { // if is menuBox displayed, hide it
dropdown-content-mobile.style.display = "none";
}
else { // if is menuBox hidden, display it
dropdown-content-mobile.style.display = "block";
}
}
It says my function is not defined.
Solved! Go to Solution.
May 19, 2022 11:09 AM
Hi @DNeubauer,
seems like a pretty "complicated" function for just a toggle effect.
Try this(don't forget to load jQuery before this code):
$( ".dropbtn-mobile" ).click(function() {
$( ".dropdown-content.mobile" ).slideToggle( "slow", function());
});
hope this helps,
best,
Anton
---
@dennisedson - jumping in since @Oezcan is on vacation 😁
May 19, 2022 11:09 AM
Hi @DNeubauer,
seems like a pretty "complicated" function for just a toggle effect.
Try this(don't forget to load jQuery before this code):
$( ".dropbtn-mobile" ).click(function() {
$( ".dropdown-content.mobile" ).slideToggle( "slow", function());
});
hope this helps,
best,
Anton
---
@dennisedson - jumping in since @Oezcan is on vacation 😁
May 19, 2022 11:11 AM
Let him know that he is not being paid while on this vacation 🙃
May 19, 2022 10:44 AM
I would check out that if statement. instead of using your declared variable menuBox, you are using an undefined variable dropdown-content-mobile which appears to be a css ID.
@Oezcan , what do you think?