JQuery Mobile: How to change data-collapsed with a button

Question

I am trying to change data-collapsed of a div (with data-role= "collapsible") with a button. My div that I tried to change its data-collapsed is:

<div id="page01" class="pages" data-role="collapsible" data-collapsed="true">

and the button that i want to change the div's data-collapsed using onclick is:

<button onclick="$('#page01').collapsible({ collapsed: false });">Collapse/ Expand</button>

I also tried to change my code, but i can't:

<button onclick="$('#page01').attrChange('data-collapsed','false')">Collapse/ Expand</button>

Or:

<button onclick="$('#page01').data('collapsed','false')">Collapse/ Expand</button>

Or:

<a><button ...>Collapse/ Expand</button></a>

Please help me!

Note: I include this on the :

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

Answer 1

The correct calls are:

$('#page01').collapsible('expand');

$('#page01').collapsible('collapse');

Updated FIDDLE

See api docs here: http://api.jquerymobile.com/collapsible/#method-collapse

Answer 2

You need to set the id right. Your div has id="page03" but your JS is calling page01 . Both places need to have the same id.