Tracking collapse state of jQuery mobile, collapsible content,

Question

I have implemented a collapsable list in jQuery Mobile. I am trying to develop a variable that is simply set to true or false depending on weather or not any element on the list is expanded (in other words it would only be false every element on the list was collapsed). The only way I can think of to do this is through the 'expand' and collapse events but the collapse event fires once for each list item on page load, plus it fires multiple times when an element is click. Below is my current code. Can any either tell me what I'm doing wrong or suggest an alternative approach?

JS:

$("#listElement").bind('collapse', $.proxy(function () {
    alert("collapse");
}, this)).bind('expand', $.proxy(function () {
    alert("expand");
}, this));

Html:

<div id='listElement' data-role="collapsible" data-collapsed='true'>
        <h3>Header Text</h3>
    <p>collaplible content</p>
</div>

Update:

The comment below illustrated that part of my problem is coming from the fact that I am dynamically setting the 'collapse' handler as I populate the list. See code below:

JavaScript:

for (var i = 0; i < 10; i++) {
    var element = $("#element").clone();
    $("#list").append(makeListElement(element));
}

function makeListElement(element) {
    element.find('h3').append("Some Html");
    element.bind('collapse', $.proxy(function () {
        alert("collapse");
    }, this)).bind('expand', $.proxy(function () {
        alert("expand");
    }, this));

}
}

Cloned Element:

<div id='element' data-role="collapsible" data-collapsed='true'>
        <h3></h3>

    <p></p>
</div>