How to switch jQuery Mobile Accordion using a button?

Question

When creating a jQuery mobile accordion, how can I get the accordion section that opens when a button is clicked?

When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.

<div data-role="collapsible-set"> <div id="filterContainer" data-role="collapsible" data-collapsed="false"> <h3>Filters</h3> <p>controls to pick options</p> <a href="#" data-role="button" id="search">Search</a> </div> <div id="resultsContainer" data-role="collapsible"> <h3>Results</h3> <p>list of results</p> </div> <div> 

Answer 1

Live example:

• http://jsfiddle.net/h2pPz/19/

HTML:

 <div data-role="page" id="home" class="type-home"> <div data-role="content"> <div data-role="collapsible-set"> <div id="filterContainer" data-role="collapsible" data-collapsed="false"> <h3>Filters</h3> <p>controls to pick options</p> <!-- Either button syntax works --> <!-- <a href="#" data-role="button" id="search">Search</a> --> <input type="button" value="Search" id="search"/> </div> <div id="resultsContainer" data-role="collapsible" data-collapsed="true"> <h3>Results</h3> <p>list of results</p> </div> <div> </div> </div> 

JS:

 $('#search').click(function() { $('#resultsContainer').trigger('expand'); });