Skip to main content
R
REELHERO
Inspiring
February 23, 2025
Answered

return event on second toggle

  • February 23, 2025
  • 1 reply
  • 3496 views

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):

 

        <script>
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)';
}
    Correct answer osgood_

    isnt that already in the original script though?

     

    let current = 0,
reviews = document.querySelectorAll(".reviewText");

setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)

setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
reviews[current].style.opacity = '1';
}, 5000)

     


    quote

    isnt that already in the original script though?

     

    setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)

     

     

    That one just fades in the initial review so you don't have to wait 5 seconds for it to appear.

     

    I'm sure you have worked it out by now:

     

    setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;

    setTimeout(function() {
reviews[current].style.opacity = '1';
    }, 1000)
    
}, 5000)

     

     

    1 reply

    L
    L e n a
    Inspiring
    February 23, 2025

    To make the hamburger icon rotate on the first click and return to its original position on the second click, you can use the classList.toggle() method in JavaScript. This method adds a class if it's absent and removes it if it's present, facilitating the alternation between two states.

     

    Here's how you can adapt your code:

     

     

    const bento_box_wrapper = document.querySelector('.bento_box_wrapper');

bento_box_wrapper.onclick = function() {
    const overlayWrapper = document.querySelector('.overlayWrapper');
    overlayWrapper.classList.toggle('overlayWrapperSlideDown');

    const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
    mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');

    // Add or remove the 'rotated' class to manage the rotation
    bento_box_wrapper.classList.toggle('rotated');
}

     

     

     

    In this script, the rotated class is added or removed with each click on the .bento_box_wrapper element. You can define this class in your CSS to handle the icon's rotation:

     

     

    /* Initial style of the icon */
.bento_box_wrapper {
    /* Your initial styles */
    transition: transform 0.3s ease; /* Adds a transition for smooth rotation */
}

/* Style when the icon is rotated */
.bento_box_wrapper.rotated {
    transform: rotate(315deg); /* Desired rotation angle */
}

     

     

    With this approach, the icon rotates 315 degrees on the first click and returns to its original position on the second click, thanks to the toggling of the rotated class.

    For a visual demonstrationyou can access there https://demo.puce-et-media.com/reelhero/index-2.html

     

      R
      REELHEROAuthor
      Inspiring
      February 23, 2025

      Thank you Lena - I didnt think to use css.. I even added the same additonal spacing I used in the hover state to that rotate css - so its consistent with the hover state..

       

      https://pitchlab.net/

       

      I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..

       

      quick question not related but on my personal site - no one seems to be able to help me but while I have you..

       

      this may be in the API of the player but I cannot figure it out 

       

      hit any thumb to bring up a movie here https://toddheymandirector.com/reel/

       

      the bottom icon in the player is a play button (should be a pause bc it is playing) however if you hit it it stays on a play button but pauses - hit it one more time and it returns to normal function ie pause button shows up when its playing and vice versa - very strange..

       

      any help would be appreciated!

      O
      osgood_
      Brainiac
      February 23, 2025
      quote

       

      I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..

       

       

      Just alter the script a little bit - see additions in red below, plus a line commented out in green.

       

      <script>
      const bento_box_wrapper = document.querySelector('.bento_box_wrapper');

      let rotate = 0;

      bento_box_wrapper.onclick = function() {
      const overlayWrapper = document.querySelector('.overlayWrapper');
      overlayWrapper.classList.toggle('overlayWrapperSlideDown');

      const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
      mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');

      rotate = rotate + 405;
      bento_box_wrapper.style.transform = `rotate(${rotate}deg)`      ;

      // Add or remove the 'rotated' class to manage the rotation
      // bento_box_wrapper.classList.toggle('rotated');
      }
      </script>

       

       

      In reference to your other issue regarding the play/pause button it's best to ask the developer of the script. The script uses jQuery which I'm not totally familar with BUT it would seem you need to add the pause button when the page initially loads. I would have thought this would be one of the options available as the script uses an 'auto' play option on page load, so why would you want to show a play button initially if that option is selected.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices