Jquery 'click' function only works on the "if" statement, not the "else if"

Question

first post, im trying to make a slide menu of some kind, and although it works clicking once and letting the menu options come forth. clicking again results in redoing the opening animation, instead of subtracting them back to their first location.

        let menuopen = false;

$(document).ready(function(e) {
      $("#menu_button").on('click',function(e) {
       if (menuopen == false) {
        $("#menu_button").css({"left":"500px"}).animate({left: '450px'})
        $("#menu_select").css({"left":"500px"}).animate({left: '750px'});
        $("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
        menuopen == true;
        
        
      }
      else if (menuopen == true) {
        $("#menu_button").css({"left":"450px"}).animate({left: '500px'})
        $("#menu_select").css({"left":"750px"}).animate({left: '500px'});
        $("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});

        menuopen == false
      }
    });
});

mplungjan · Accepted Answer · 2021-06-09T12:53:52.233

You are not assigning

 menuopen == true;

should be

menuopen = true;

In any case: Why else if, just use else?

Try this - it saves the state in the button

You COULD use a ternary but that would be messy in this case

$(function(e) {
  $("#menu_button").on('click',function(e) {
    const menuopen = !!$(this).data("open"); // force boolean 
    if (menuopen) {
      $("#menu_button").css({"left":"450px"}).animate({left: '500px'})
      $("#menu_select").css({"left":"750px"}).animate({left: '500px'});
      $("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
    }  
    else {
      $("#menu_button").css({"left":"500px"}).animate({left: '450px'})
      $("#menu_select").css({"left":"500px"}).animate({left: '750px'});
      $("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
    }
    $(this).data("open",!menuopen) 
  });
});

Perhaps

const butOpen =   { "left": "450px" },
  butClosed =     { "left": "500px" },
  selectOpen =    { "left": "750px" },
  selectClosed =  { "left": "500px" },
  select2Open =   { "left": "1050px" },
  select2Closed = { "left": "500px" }

$(function(e) {
  $("#menu_button").on('click', function(e) {
    const menuopen = !!$(this).data("open"); // force boolean 
    $("#menu_button").css(menuopen ? butOpen : butClosed).animate(menuopen ? butClosed : butOpen)
    $("#menu_select").css(menuopen ? selectOpen : butClosed).animate(menuopen ? selectClosed : selectOpen)
    $("#menu_select_two").css(menuopen ? select2Open : select2Closed).animate(menuopen ? select2Closed : select2Open)
    $(this).data("open", !menuopen)
  });
});

Or use a class and toggle it:

window.addEventListener("load", function(e) {
  const wrapper = document.querySelector(".wrapper");
  document.getElementById("menu").addEventListener("click", function(e) {
    wrapper.classList.toggle("open");
    this.textContent = wrapper.classList.contains("open") ? "Close" : "Open";
  })
})

.wrapper {
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

#slide {
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100px;
  background: blue;
  transition: 1s;
}

.wrapper.open #slide {
  transition: 1s;
  left: 0;
}

<button id="menu" type="button">Open</button>
<div class="wrapper">
  <img id="slide" src="https://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>

Wow! thank you so much, this worked perfectly! i don't know exactly what you mean about it being messy though :o — Razito, Jun 09 '21 at 12:23
A ternary would be: `$("#menu_button").css(menuopen ? {"left":"450px"}:{"left":"500px"}).animate(menuopen?{left: '500px'}:{left: '450px'})` — mplungjan, Jun 09 '21 at 12:25
OH! this looks way more organized! and it also lets me use them on other occasions without having to write every pixel! thank you so much, this helps alot! — Razito, Jun 09 '21 at 12:38
im realizing now how much i dont know, words like "Tuple" and "Ternary operator" are total unknowns to me ahahaha, i have alot more to learn! c: — Razito, Jun 09 '21 at 12:45
Just to tease you: See the last example, No jQuery and much simpler animation using transitions — mplungjan, Jun 09 '21 at 12:54
oh! im very sorry, i was stuck at the cabin for 3 days. thanks for letting me know! totally forgot. — Razito, Jun 14 '21 at 13:01

Jquery 'click' function only works on the "if" statement, not the "else if"

1 Answers1