Open a jQuery Mobile Collapsible Set

Question

In jQuery Mobile, I have a collapsible set:

<div data-role="collapsible-set" class="ui-collapsible-set ui-group-theme-inherit ui-corner-all">
    <div data-role="collapsible" data-theme="a" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Tab 1</a></h3>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
            <p>Content 1</p>
        </div>
    </div>
    <div data-role="collapsible" data-theme="a" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Tab 2</a></h3>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
            <p>Content 2</p>
        </div>
    </div>
    <div data-role="collapsible" data-theme="a" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child">
        <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-a">Tab 3</a></h3>
        <div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
            <p>Content 3</p>
        </div>
    </div>
</div>

How can I open, for example, the second panel programmatically?

your `collapsibleset` markup seems unlikely, did you checked the docs here: [Collapsible set](http://demos.jquerymobile.com/1.4.5/collapsibleset/) ? It seems to me you mixed pre-enhanced markup with data-role enhancement requests. — deblocker, Jan 20 '17 at 21:59

score 0 · Answer 1 · answered Jan 20 '17 at 17:55

0

You can use the collapse() method.

$('PUT_HERE_A_SELECTOR_FOR_YOUR_SECOND_PANEL').collapsible('collapse');

And that's it.

Cya

answered Jan 20 '17 at 17:55

Dobbin

161
1
5

Uncaught Error: cannot call methods on collapsible prior to initialization; attempted to call method 'collapse' – GTS Joe Jan 20 '17 at 17:59
Are you putting it after the jQuery Mobile `pageinit` event? – Dobbin Jan 20 '17 at 18:19
Yeah, I'm putting it in $(document).bind('pageinit', function() {}); – GTS Joe Jan 20 '17 at 18:20
Try to capture the view itself, something like this: `$('#YourPageName').bind( 'pageinit',function(event){ // The collapse method here; });` – Dobbin Jan 20 '17 at 20:00
If this do not work, can you post a fiddle with an example your code? – Dobbin Jan 20 '17 at 20:07

Open a jQuery Mobile Collapsible Set

1 Answers1