Search code examples
javascriptjqueryhtmljquery-mobilejquery-mobile-collapsible

jQuery Mobile - Open Collapsible-set with URL parameter


Using jQuery Mobile, can a panel in the collapsible-set (accordion?) be open by default? For example, have the second panel, "Title 2", open on page load. I have not found any information on this and would like to do this based on a URL parameter.

Here's the html I have currently:

<div data-role="collapsible-set">
  <div data-role="collapsible" data-theme="c" data-content-theme="b">
    <h3>Title 1</h3>
    <div>Text 1 inside here</div>
  </div>
  <div data-role="collapsible" data-theme="c" data-content-theme="b">
    <h3>Title 2</h3>
    <div>Text 2 is here</div>
  </div> 
  <div data-role="collapsible" data-theme="c" data-content-theme="b">
    <h3>Title 3</h3>
    <div>Text 3 inside this div</div>
  </div>   
</div>

Here is a fiddle as well:

http://jsfiddle.net/dqmj3/


Solution

  • Working example: http://jsfiddle.net/Gajotres/Qm3wb/

    Attribute: data-collapsed="false"

    Official documentation : http://api.jquerymobile.com/collapsible/#option-collapsed

     <div data-role="collapsible-set">
          <div data-role="collapsible" data-theme="c" data-content-theme="b" data-collapsed="false">
              <h3>Title 1</h3>
              <div>Text 1 inside here</div>
         </div>
         <div data-role="collapsible" data-theme="c" data-content-theme="b">
              <h3>Title 2</h3>
              <div>Text 2 is here</div>
         </div> 
         <div data-role="collapsible" data-theme="c" data-content-theme="b">
              <h3>Title 3</h3>
              <div>Text 3 inside this div</div>
         </div>   
    </div>