CODEWITHSUNDEEP
jquery-mobile
Homer
Homer

Reputation: 7826

How do I toggle the jQuery Mobile Accordion with a button click?

When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open 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>

Upvotes: 4

Views: 11568

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85348

Live Example:

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');
});

Upvotes: 5

Related Questions