Evening,
I have very, very limited knowledge of javascript, and I've run into a problem I can't seem to resolve.
I have an animated hamburger menu, which when clicked/tapped shows a div (that is later to contain an accordion menu).
The toggle on/off script works fine, but whenever I add the script to animate the hamburger menu, it seems to override the toggle on/off script and does not work.
Can anyone please steer me in the right direction or offer some advice on where I am going wrong. Many thanks.
<head>
<meta charset="utf-8">
<style>
#mob-menu {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
</style>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="mob-menu">
Accordion menu goes here
</div>
<script>
function myFunction() {
var x = document.getElementById('mob-menu');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>