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=".1.1/jquery.min.js"></script>

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

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

• javascript
• jquery

• document.getElementsByTagName("BODY")[0] why not jQuery? – Roko C. Buljan Commented Jun 15, 2017 at 16:50
• Please show all the relevant code, including the HTML. – Scott Marcus Commented Jun 15, 2017 at 16:50
• @RokoC.Buljan Why not document.querySelector("body") and no JQuery? – Scott Marcus Commented Jun 15, 2017 at 16:50
• because $('body').css('background','red') is shorter – adeneo Commented Jun 15, 2017 at 16:51
• shorter != better when an additional library is involved for a simple operation. – Scott Marcus Commented Jun 15, 2017 at 16:51

1 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?