A function that runs on the second click

Question

I'm running a function that shows a left menu when I click a button.

I need that the menuColapsado() function to run on the first click of the ID menu_button but the function shows the html element on the second click instead of the first. My code is below

function myFunctionxxx() {
  var xxx = document.getElementsByTagName("BODY")[0];
  xxx.style.backgroundColor = "red";
}


$(document).ready(function() {
      $('#menu_links').css({
        width: '50px'
      });
      $('.collapse-menu').addClass('hidden');

      $('ul#menu_links li').hover(function() {
        $('span', this).addClass('show');
        $('span', this).removeClass('hidden');
      }, function() {
        $('span', this).addClass('hidden');
        $('span', this).removeClass('show');
      });


      $("#menu_button").click(function() {
        menuColapsado();
      });

      $('a.test').on("click", function(e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
      // });





      var clic = 1;

      function menuColapsado() {
        if (clic == 1) {
          $('#menu_links').animate({
            width: '50px'
          }, 350);
          clic = clic + 1;
          $('.collapse-menu').removeClass('show');
          $('.collapse-menu').addClass('hidden');

          $('ul#menu_links li').hover(function() {
            $('span', this).addClass('show');
            $('span', this).removeClass('hidden');
          }, function() {
            $('span', this).addClass('hidden');
            $('span', this).removeClass('show');
          });
        } else {
          $('#menu_links').animate({
            width: '200px'
          }, 350);
          clic = 1;
          $('.collapse-menu').addClass('show');
          $('.collapse-menu').removeClass('hidden');

          $('ul#menu_links li').hover(function() {

          }, function() {
            $('span', this).addClass('show');
            $('span', this).removeClass('hidden');
          });
        }
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="menu_button" onclick="myFunctionxxx();"></button>

Answer 1

So, from what I understand, you have a button and you want to run a function the first time it is clicked and another function the second time it is clicked.

Here is a simple solution with a counter and an If statement:

var timesClicked = 0;

$("#menu_button").click(function() {
    timesClicked++;

    if (timesClicked>1) {
        //run second function
    } else {
        //run first function
    }
})

The above code will run the second function for every other time the button is clicked. You can easily change it to suit your needs if you do not want this to happen.

If you want to use every 3rd, 5th, 7th etc click as a first click and every 4th, 6th, 8th etc click as a second click, you can change the If statement and use modulo division:

var timesClicked = 0;

$("#menu_button").click(function() {
    timesClicked++;

    if (timesClicked%2==0) {
        //run second function
    } else {
        //run first function
    }
})

Check modulo division: How can I use modulo operator (%) in JavaScript?