title: Trying to use a styled checkbox in an accordion header
body: <p><strong>EDIT</strong>
  I was trying to select the checkbox with <code>$("#accordion input[type='checkbox']")</code> which didn't work, because I had the checkbox set to <code>display:none;</code>
  I ended up having to use <code>$("#accordion .onoffswitch")</code> instead, because that effected the div which contained the fancy toggle part of the fancy toggle switch.</p>
  
  <hr>
  
  <p>I'm trying to create an accordion of clients where - in the header - you can have a toggle switch. This way I can set whether a client is active or not in my app without the user having to open the accordion, but still have the ability to open the accordion and interact with elements inside.</p>
  
  <p>My problem is that the toggle switch doesn't seem to be clickable.</p>
  
  <p>It's hard to describe, so here's a <a href="http://jsfiddle.net/samhuckaby/ZecVJ/" rel="nofollow">JSFiddle of my problem</a></p>
  
  <p>basically, I just need to get my toggle switch to be able to change.</p>
  
  <p>I already implement some propagation javascript like so:</p>
  
  <pre><code>$( ".accordion" ).accordion();
  $('.accordion input[type="checkbox"]').click(function(e) {
      e.stopPropagation();
  });
  </code></pre>
  
  <p>So my concern is that the H3 tags are somehow blocking the checkbox click event from firing.</p>
  
  <p>Let me know if you would like me to post anything else related to the code (though the JSFiddle pretty much has it all there.)</p>