[SOLVED] allow click event inside collapsable heading

allow click event inside collapsable heading

I am trying to integrate 'collapsible-set' with a radio group.

I would like the 'expand/collapse' behaviour to be triggered by clicking the '+/-' icon, and the radio selection to be triggered by clicking the label/input.

So far, I have...

.ui-collapsible-heading .ui-radio label.ui-btn {
  border-style: none;
  padding-top: 0;
  padding-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel=stylesheet href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<form>
  <fieldset>
    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
      <div data-role="collapsible">
        <h3>
            <input name="radio" id="radio1" value="1" type="radio">
            <label for="radio1">One</label>
        </h3>
        <p>I'm the collapsible content for section 1</p>
      </div>
      <div data-role="collapsible">
        <h3>
            <input name="radio" id="radio2" value="2" type="radio">
            <label for="radio2">Two</label>
        </h3>
        <p>I'm the collapsible content for section 2</p>
      </div>
    </div>
  </fieldset>
</form>

This achieves roughly the desired layout, however the radio buttons do not receive the click event.

Solution

You can simply use the collapsible itself to activate the corresponding radio button:

$(".ui-collapsible").on("collapsibleexpand", function(event, ui) {
  $(this).find("input[type='radio']").prop("checked", true);
  $("input[type='radio']").checkboxradio("refresh");
  $(this).find("input[type='radio']").trigger("change");
});

Demo: https://jsfiddle.net/hvpLn3qm/

Or you could separate the expand/collapse from the radio check/uncheck:

Demo 2: https://jsfiddle.net/hvpLn3qm/4/

I would also add following CSS rules:

.ui-collapsible-heading .ui-radio label.ui-btn {
  line-height: 1.6 !important;
}
.ui-collapsible-heading .ui-radio {
  display: inline-block !important;
}