title: Why do I get this JQuery error: $(".left_hand_icon").button is not a function
body: <p>This is my jS code:</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"&gt;&lt;/script&gt;
      &lt;script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"&gt;&lt;/script&gt;
  
      &lt;script src="js/mr_lp_minimizr.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  $(document).ready(function(){
  
  if(!Modernizr.input.placeholder){
  
      $('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
          input.removeClass('placeholder');
        }
      }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
          input.addClass('placeholder');
          input.val(input.attr('placeholder'));
        }
      }).blur();
      $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
          var input = $(this);
          if (input.val() == input.attr('placeholder')) {
            input.val('');
          }
        })
      });
  
  }
  
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  jQuery.fn.extend({
    slideRightShow: function(speed) {
      return this.each(function() {
          $(this).show('slide', {direction: 'right'}, +speed || 1000);
      });
    },
    slideLeftHide: function(speed) {
      return this.each(function() {
        $(this).hide('slide', {direction: 'left'}, +speed || 1000);
      });
    },
    slideRightHide: function(speed) {
      return this.each(function() {
        $(this).hide('slide', {direction: 'right'}, +speed || 1000);
      });
    },
    slideLeftShow: function(speed) {
      return this.each(function() {
        $(this).show('slide', {direction: 'left'}, +speed || 1000);
      });
    }
  });
  
  
  $(document).ready(function () {
      $("#slides :first-child").addClass("currentSlide");
      $("#slides :not(:first-child)").hide();
  
      $(".left_hand_icon").button().click(function () { //This is the line where issue is
          currentSlide = $("#slides .currentSlide");
  
          if(currentSlide.prev().prev().size() &lt; 1) {
              // The incoming slide is the first - disable Left button
              $(".left_hand_icon").button("disable");
          }
  
          currentSlide.prev().addClass("currentSlide");
          currentSlide.removeClass("currentSlide");
  
          currentSlide.prev().slideLeftShow();
          currentSlide.slideRightHide();
  
          $(".right_hand_icon").button("enable");
      }).button("disable");
  
      $(".right_hand_icon").button().click(function () {
          currentSlide = $("#slides .currentSlide");
  
          if(currentSlide.next().next().size() &lt; 1) {
              // The incoming slide is the last - disable Right button
              $(".right_hand_icon").button("disable");
          }
  
          currentSlide.next().addClass("currentSlide");
          currentSlide.removeClass("currentSlide");
  
          currentSlide.next().slideRightShow();
          currentSlide.slideLeftHide();
  
          $(".left_hand_icon").button("enable");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I add this comment to the line for which the error shows:  //This is the line where issue is</p>