How can I popup an alert of "Hello" after clicking collapsible under JqueryMobile

Question

I am using JqueryMobile 1.3.2. I would like to add some event when user clicking the header. For example, popup an alert "Hello". What can I do?

<div data-role="collapsible">

  <h3>I'm a header</h3>

  <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>

</div>

Answer 1

Listen to two events instead of binding a click event. Collapsibles have two special events you can listen to and run code when they trigger, expand and collapse.

For jQuery Mobile 1.4 collapsibleexpand and collapsiblecollapse.

$(".selector").on("collapse", function () {
  alert("Collapsed");
});

$(".selector").on("expand", function () {
  alert("Expanded");
});

Demo