jQuery Mobile - click data-collapsed

Question

I have div with role="collapsible" and I'm trying to expand it when a user clicks the download button but it's not working, here's the code:

<script>
$(document).ready(function(){
  $('#download').click(function () {
    console.log("ok"); // this executes
    $("#set1").trigger("expand"); // but this doesn't
    //document.getElementById("set1").setAttribute("data-collapsed", "false"); also tried this but no luck.
  });
});
</script>

<p data-theme="a"><a id="download" href="#" class="ui-btn">DOWNLOAD</a></p>
<div data-role="collapsible" id="set1" data-collapsed="true">
    <h3>INSTRUCTIONS</h3>
    <p><b> Before install ...</b></p>
     <p>-- text....</p>
     <p>-- text...</p>
</div>

what am I missing here ?

Answer 1

Use the expand method on the collapsible widget:

$("#set1").collapsible( "expand" );

Also, instead of $(document).ready(..., you should use the jQM pagecreate event:

$(document).on("pagecreate", "#pageid", function(){...