Jump to content

Toggle on/off script problems


ScotBlue
 Share

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...