title: Why does click for toggle checkbox become a double click?
body: <p>I am currently making a <code>checkbox</code> with a <code>label</code> attached to it. I use the <code>for</code> attribute to link the click for the checkbox.</p>
  
  <p>I also have a jQuery function which <code>onclick</code> for the checkbox and labels container does a slide toggle for a text input field.</p>
  
  <p>When I click the checkbox, only one click is detected and the text field slides down nicely. However, when I click the label it seems that a double click is happening so the text field slides down and then immediately back up.</p>
  
  <p>I have an ID of <code>toggle-checkbox</code> on my checkbox and a <code>for="toggle-checkbox"</code> on my label and I suspect that somehow triggers an extra click.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="cart-summary__coupon-code"&gt;
    &lt;div class="form-group js-coupon-code"&gt;
      &lt;input class="cart-summary__coupon-code__checkbox" type="checkbox" id="toggle-checkbox"&gt;
      &lt;label class="cart-summary__coupon-code__label form-group__label--block" for="toggle-checkbox"&gt;click me&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="coupon-code"&gt;
    &lt;input type="text" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>jQuery('.js-coupon-code').click(function() {
      $( ".coupon-code" ).slideToggle( "slow", function() {
      });
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.coupon-code {
    display: none;
  }
  </code></pre>
  
  <p>I have <a href="http://codepen.io/anon/pen/QyBqXa" rel="nofollow">created a codepen</a> where the issue can be reproduced.</p>