title: jQuery click fires on second click but not first
body: <p>I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)</p>
  
  <pre><code>$('.expand-btn').click(function() {
        var clicks = $(this).data('clicks');
        if (clicks) {
          $('.expand-wrapper').animate({
              right: "0"
          }, 500, function() {
  
          });
        } else {
          $('.expand-wrapper').animate({
              right: "-325px"
          }, 500, function() {
  
          });
        }
        $(this).data('clicks', !clicks);
      });
  </code></pre>
  
  <p>EDIT: Here is my HTML code. It works like <a href="http://www.jqueryscript.net/demo/Sliding-Feedback-Box-Plugin-with-jQuery-feedBackBox/" rel="nofollow">this jquery plugin</a> where <code>.expand-wrapper</code> is the contact form which is hidden off screen and <code>.expand-btn</code> is the little flap that is on the side of the screen and clickable.</p>
  
  <pre><code>&lt;div class="expand-wrapper"&gt;
      &lt;a href="#" class="expand-btn"&gt;&lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt; Contact&lt;/a&gt;
      &lt;div class="expand-form"&gt;
          &lt;?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>