title: A function that runs on the second click
body: <p>I'm running a function that shows a left menu when I click a button.</p>
  <p>I need that the <code>menuColapsado()</code> function to run on the first click of the ID <code>menu_button</code> but the function shows the html element on the second click instead of the first.
  My code is below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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');
            });
          }
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;button type="button" id="menu_button" onclick="myFunctionxxx();"&gt;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>