CODEWITHSUNDEEP
javascriptjquery-mobile
Pramod Setlur
Pramod Setlur

Reputation: 811

Expand a collapsible set programatically in js

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.

Upvotes: 2

Views: 6307

Answers (3)

Red2678
Red2678

Reputation: 3287

You need to add 

.collapsible("refresh");

After all 

.trigger("expand");

calls. So an example from your code would be:

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

Upvotes: 1

pat capozzi
pat capozzi

Reputation: 1459

The current api docs provide new info

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

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

Upvotes: 6

Gajotres
Gajotres

Reputation: 57309

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()

Upvotes: 2

Related Questions