CODEWITHSUNDEEP
javascripthtmltoggle
REELHERO
REELHERO

Reputation: 37

return event on second toggle

I have a burgermenu with an overlay using toggle to activate the overlay (upper right):

https://pitchlab.net/

I used JS to rotate the burgermenu on toggle... the overlay/menu slides down .but i cant get it it to rotate back to the original position on a second toggle as the overlay/menu clears

my script (what I was trying is in bold):

const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
const bento_box = document.querySelectorAll('.bento_box');
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');
$('.bento_box_wrapper').addClass('blur');
bento_box_wrapper.style.transform = 'rotate(315deg)';
$('div#toggle').addClass('blur');
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
**bento_box_wrapper.classList.toggle = 'rotate(45 deg)';**
}

Upvotes: -1

Views: 35

Answers (1)

aManFromEarth
aManFromEarth

Reputation: 140

You can set transform attribute of the element to rotate(0). Something like below should handle your case:

var angle = bento_box_wrapper.style.transform !== 'rotate(45deg)' ? 45 : 0;
bento_box_wrapper.style.transform = 'rotate(' + angle + 'deg)';

Upvotes: 0

Related Questions