Expand a collapsible set programatically in js

Question

I have 4 collapsible-sets: 1 collapsible for each quarter of the year. According to the current month, the corresponding collapsible should expand at document ready. However this is not functioning.

<script type="text/javascript">

    $(document).ready
    (
        function()
        {

            var today=new Date();
            var month=today.getMonth()+1;
            alert(month);

            if(month>9)
            {
                $('#qFourCollapsible').trigger("expand");
            }
            else if(month>6)
            {
                $('#qThreeCollapsible').trigger("expand");
            }
            else if(month>3)
            {
                $('#qTwoCollapsible').trigger("expand");
            }
            else
            {
               alert("in else");
               $('#qOneCollapsible').bind("expand", function () {
                       alert('Expanded');
                       });
            }



        }


    );
    </script>

<html>
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed="false" id="qOneCollapsible">
                <div data-role="collapsible">
                    <h2>January-March</h2>

                    <table id="quarterOneTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qTwoCollapsible">
                <div data-role="collapsible">
                    <h2>April-June</h2>

                    <table id="quarterTwoTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="c" id="qThreeCollapsible">
                <div data-role="collapsible">
                    <h2>July-September</h2>

                    <table id="quarterThreeTable">
                    </table>
                </div>
            </div>
            <div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qFourCollapsible">
                <div data-role="collapsible">
                    <h2>October-December</h2>

                    <table id="quarterFourTable">
                    </table>

                </div>
            </div>  
</html>

So, as you can see I have tried expanding the collapsible in two ways. 1: $('#qFourCollapsible').trigger("expand"); 2: $('#qOneCollapsible').bind("expand", function () { alert('Expanded'); Both of them are not working. The 2nd method is working and the alert-expanded is shown only upon CLICKING the collapsible. I however, want it to be expanded by itself depending on the current month.

unable to generate the fiddle for the code. :( the css of jquery mobile is not being applied. — Pramod Setlur, Feb 20 '13 at 06:46

score 6 · Answer 1 · answered Apr 02 '15 at 00:21

6

The current api docs provide new info

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

This works the previous code in this thread no longer seems to work.

answered Apr 02 '15 at 00:21

pat capozzi

1,412
1
20
16

This is the correct answer as of today. However @Gajotres made an important comment: *you need to expand data-role="collapsible" and you are trying to do that on a data-role="collapsible-set"* – ishahak Jul 07 '17 at 11:31

score 2 · Accepted Answer · edited May 23 '17 at 11:53

Answer is a simple one, you are trying to expand a wrong element, you need to expand data-role="collapsible" and you are trying to do that on a data-role="collapsible-set".

Here's a working example: http://jsfiddle.net/Gajotres/vSjtA/

$(document).on('pagebeforeshow', '#index', function(){       
    $( "#qOneCollapsible-inner" ).trigger( "expand" );
    $( "#qThreeCollapsible-inner" ).trigger( "expand" );    
});

Also do not use document ready with jQuery Mobile, it will work in some basic cases. Take a look at my other ARTICLE about that topic. Or find it HERE. Just look at the first chapter called: $(document).on('pageinit') vs $(document).ready()

score 1 · Answer 3 · edited Nov 17 '15 at 11:04

1

You need to add

.collapsible("refresh");

After all

.trigger("expand");

calls. So an example from your code would be:

$('#qTwoCollapsible').trigger("expand").collapsible("refresh");

edited Nov 17 '15 at 11:04

H. Pauwelyn

13,575
26
81
144

answered Feb 20 '13 at 05:51

Red2678

3,177
2
29
43

Expand a collapsible set programatically in js

3 Answers3