title: Trying to hide/show divs on radio button clicks
body: <p>I'm trying to hide and show different divs depending on which radio button people click on.  </p>
  
  <ul>
  <li><p>Jquery is loading fine, I've tried putting an alert on page load. </p></li>
  <li><p>Very similar code, selector methods etc have worked on a page in the same directory with the same includes on the same server</p></li>
  </ul>
  
  <p>The input box code is: </p>
  
  <pre><code>            &lt;label class="radio"&gt;&lt;input type="radio" name="input_sandwich_choice" value="Panini"&gt;Panini&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input type="radio" name="input_sandwich_choice" value="Sandwich"&gt;Sandwich&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input type="radio" name="input_sandwich_choice" value="Baguette"&gt;Baguette&lt;/label&gt;
  </code></pre>
  
  <p>The divs are:</p>
  
  <pre><code>        &lt;div id="div_bread_options" class="collapse span3"&gt; &lt;!--2.2--&gt;
              &lt;h4&gt;Which bread would you like?&lt;/h4&gt;
              &lt;label class="radio"&gt;&lt;input id="id_option_bread_white" type="radio" name="input_bread_choice" value="white"&gt;White&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input id="id_option_bread_brown" type="radio" name="input_bread_choice" value="brown"&gt;Brown&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input id="id_option_bread_granary" type="radio" name="input_bread_choice" value="granary"&gt;Granary&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input hidden id="id_option_bread_none" type="radio" name="input_bread_choice" value=""&gt;&lt;/label&gt;
          &lt;/div&gt; &lt;!--2.2--&gt;
  
          &lt;div id="div_butter_options" class="collapse span3"&gt; &lt;!--2.3--&gt;
              &lt;h4&gt;Would you like butter?&lt;/h4&gt;
              &lt;label class="radio"&gt;&lt;input type="radio" id="id_option_butter_yes" name="input_butter_choice" value="Yes"&gt;Yes&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input type="radio" id="id_option_butter_no" name="input_butter_choice" value="No"&gt;No&lt;/label&gt;
              &lt;label class="radio"&gt;&lt;input hidden type="radio" id="id_option_butter_none" name="input_butter_choice" value=""&gt;&lt;/label&gt;
          &lt;/div&gt; &lt;!--2.3--&gt;
  </code></pre>
  
  <p>And finally the Jquery is:</p>
  
  <pre><code>&lt;script&gt;
  
      $("input[name=input_sandwich_choice]").click(function() {
      var checkedValue = $("input[name='input_sandwich_choice']:checked").val();
      console.log(checkedValue);
      if (checkedValue == "Panini") {
          $("#div_bread_options").collapse('hide');
          $("#div_butter_options").collapse('show');
      } else if (checkedValue == "Sandwich") {
          $("#div_bread_options").collapse('show');
          $("#div_butter_options").collapse('hide');
      } else if (checkedValue == "Baguette") {
          $("#div_bread_options").collapse('show');
          $("#div_butter_options").collapse('hide');
      } else {
          alert("Oops.");
      }
  });​​
      &lt;/script&gt;
  </code></pre>
  
  <p>Just can't figure why that doesn't work... Any help much appreciated! Thanks</p>