Question

I have been looking at using JQM collapsible content and whilst I have understood how to use them, I cannot see a way to use with list elements. I have checked the docs and also spent time looking through google, but no go. If it is possible, I would be grateful if someone could show me how to do it. Thanks

<ul data-role="listview" data-inset="true">
  <li><a href="#newintake">New Intake</a></li>
  <li><a href="#boxretrieval">Box Retrieval</a></li>
  <li><a href="#boxreturn">Box Return</a></li>
  <li><a href="#boxdestruction">Box Destruction</a></li>
  <li><a href="#permboxdestruction">Permanent Box Destruction</a></li>
</ul>

Answer 1

Something like this:

• http://jsfiddle.net/deeu8/4/

HTML:

<div data-role="page" id="home"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#page2">Page 2</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Numeric Section</h3>
            <p>
                <ul data-role="listview">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </p>
        </div>
    </div>
</div>

<div data-role="page" id="page2"> 
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f"> 
            <li data-role="list-divider">Nagivsation</li> 
            <li><a href="#home">Home Page</a></li> 
        </ul> 
        <div data-role="collapsible" data-collapsed="true">
            <h3>Alpha Section</h3>
            <p>
                <ul data-role="listview">
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </p>
        </div>
    </div>
</div>