CODEWITHSUNDEEP
jqueryjquery-mobile
user663724
user663724

Reputation:

How to programatically expand a Jquery's data-role="collapsible"

I need your help in grammatically expanding a Jquery's Collapsable div

I have tried with number of options

This is my fiddle

http://jsfiddle.net/jWaEv/20/

I have tried as following 

<div data-role="content" class="data">
    <div class="my-collaspible" id="first" data-inset="false" data-role="collapsible">
         <h3>Header 1</h3>

        <p>Content</p>
        <p>Content</p>
    </div>
    <div class="my-collaspible" id="second" data-inset="false" data-role="collapsible">
         <h3>Header 2</h3>

        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>

 $(document).ready(function() {
   var id = 'first';
   $("#" + id).trigger('expand').collapsible("refresh");
 });

Could you please let me know how to do this ??

Upvotes: 0

Views: 1951

Answers (3)

Juraj Gajdos
Juraj Gajdos

Reputation: 11

("#myCollapsible").collapsible("expand");

This worked for me when using jQuery 1.11.1 and JQM 1.4.5

Upvotes: 1

RattyLaa
RattyLaa

Reputation: 323

You can use this:

http://jsfiddle.net/jWaEv/37/

<div data-role="collapsible-set">
    <div id="first" data-role="collapsible">
      <h3>Header 1</h3>
      <p>Content</p>
      <p>Content</p>
    </div>
    <div id="second" data-role="collapsible">
      <h3>Header 2</h3>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
</div>
<input type="button" value="Test" id="btn1" />

and JS:

 $(document).ready(function() {
   $("#first").collapsible('expand');

   //test
   $('#btn1').click(function(){
     $("#first").collapsible('collapse');
   });
});

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20636

Use following option : collapsible,

$("#" + id).collapsible( "option", "collapsed", false );

Updated Fiddle

Upvotes: -1

Related Questions