ScotBlue Posted June 12, 2017 Share Posted June 12, 2017 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 12, 2017 Share Posted June 12, 2017 (edited) You can't have multiple functions of the same name, Like in the film 'Highlander' there can be only one. Edited June 12, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
ScotBlue Posted June 12, 2017 Author Share Posted June 12, 2017 Lol. That's a good way of putting it. I've included the toggle code in the function above, and it seems to have done the trick, Thanks @dsonesuk <script> function myFunction(x) { x.classList.toggle("change"); var x = document.getElementById('mob-menu'); if (x.style.display === 'block') { x.style.display = 'none'; } else { x.style.display = 'block'; } } </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now