title: Like button - Toggle between two functions
body: <p>I'm trying to toggle between two functions when a "Like" button is clicked. </p>
  
  <pre><code> &lt;div class="like"&gt;
    &lt;div class="count"&gt;&lt;%= post.num_likes %&gt; &lt;/div&gt;
    &lt;div class="icon" id="like"&gt;&lt;i class="icon-thumbs-up-alt"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;/div&gt;      
  </code></pre>
  
  <p>right now I have:</p>
  
  <pre><code>$(".like").click(function(event){       
  event.stopPropagation();                    
  $("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");                           
   likePost(TestCanvas, $(this).prev('div').find('.hideThis').text());    
   });
  </code></pre>
  
  <p>likePost(canvasID, postID) takes parameters and interacts with an API
  When I click on .like again, I would like to call unlikePost().</p>
  
  <p>Is there an easy way to toggle between likePost() and unlikePost() when .like is clicked?</p>
  
  <p>Ive tried:</p>
  
  <pre><code>$('.like').toggle(function() {
   alert('First handler for .toggle() called.');
   likePost(TestCanvas, $(this).prev('div').find('.hideThis').text());
  }, function() {
  alert('Second handler for .toggle() called.');
  unlikePost(TestCanvas, $(this).prev('div').find('.hideThis').text());
  });
  </code></pre>
  
  <p>Its not working as i thought it would though. Seems to execute on page load instead of on click of .like. </p>