title: Simple JQuery Script for woocommerce not working
body: <p>This is quite a tricky one to debug as the problem occurs in the context of an entire page and I struggle to reproduce it in isolation. I will try and post as much relevant code as possible here though.</p>
  
  <p>Essentially I have a dev WooCommerce WordPress store for which I have built a custom theme. On the checkout page there is the standard choice of payment options marked up as follows:</p>
  
  <pre><code>&lt;ul class="payment_methods methods"&gt;
      &lt;li class="payment_method_bacs"&gt;
          &lt;div class="radio"&gt;
              &lt;label for="payment_method_bacs"&gt;
                  &lt;input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" checked='checked' data-order_button_text="" /&gt;Direct Bank Transfer&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default payment_box payment_method_bacs"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won&amp;#8217;t be shipped until the funds have cleared in our account.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="payment_method_cheque"&gt;
          &lt;div class="radio"&gt;
              &lt;label for="payment_method_cheque"&gt;
                  &lt;input id="payment_method_cheque" type="radio" class="input-radio" name="payment_method" value="cheque" data-order_button_text="" /&gt;Cheque Payment&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="panel panel-default payment_box payment_method_cheque" style="display:none;"&gt;
              &lt;div class="panel-body"&gt;
                  &lt;p&gt;Please send your cheque to Store Name, Store Street, Store Town, Store State / County, Store Postcode.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The idea is that when a payment option radio button is selected the corresponding <code>payment_box</code> is shown. Upon referring to the plugin assets there is a <a href="https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/checkout.js#L111-131" rel="nofollow">jQuery snippet</a> that achieves this:</p>
  
  <pre><code>payment_method_selected: function( e ) {
              if ( $( '.payment_methods input.input-radio' ).length &gt; 1 ) {
                  var target_payment_box = $( 'div.payment_box.' + $( this ).attr( 'ID' ) );
  
                  if ( $( this ).is( ':checked' ) &amp;&amp; ! target_payment_box.is( ':visible' ) ) {
                      $( 'div.payment_box' ).filter( ':visible' ).slideUp( 250 );
  
                      if ( $( this ).is( ':checked' ) ) {
                          $( 'div.payment_box.' + $( this ).attr( 'ID' ) ).slideDown( 250 );
                      }
                  }
              } else {
                  $( 'div.payment_box' ).show();
              } //etc...
  </code></pre>
  
  <p>This script is included in my site scripts by WooCommerce in the normal way and there is nothing in the console indicating a problem but for some reason when a payment method radio is selected its corresponding box does not show.</p>
  
  <p>I think the only way to demonstrate is to link to the site in question: <a href="http://dev.samarkanddesign.com/shop" rel="nofollow">http://dev.samarkanddesign.com/shop</a>. Add a product to cart and visit <a href="http://dev.samarkanddesign.com/checkout/" rel="nofollow">http://dev.samarkanddesign.com/checkout/</a>.</p>
  
  <p>If anyone can help me debug this I'll be enternally grateful!</p>