jquery mobile collapsible content help

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 thr开发者_如何学Goough 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>

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>

I'm having the same problem and my best approach right now is this:

<ul data-role="listview" data-inset="true">
    <li>
       <a href="#">
          <p>
             <div data-role="collapsible">
                <h3>Title</h3>
                <p>collapsible content</p>
             </div>
          </p>
       </a>
    </li>
</ul>

Its no so eye candy, but will do the trick with some css adjusts.

The path of least resistance is to not collapse the UL by hiding LI's, but instead place the UL in a div and collapse that.

Like this:

<a href="#" class="someButton">Click to toggle</a>

<div class="collapser">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

And then this JS:

$('.someButton').click( function() {
    $('.collapser').toggle();
});

Also, notice that I could have made a more complex show / hide functions that saves the current state of the collapser div... using show(), hide(), slideToggle(), fadeToggle(), etc

Unfortunately, jQM collapsible content is not applicable to lists. I hope it will come in the near future.

Here is my way to do it. It could be improved by adding an icon.

html:

<ul data-role="listview" data-inset="true">
    <li id="cars" data-role="list-divider" role="heading">French Cars</li>
    <li class="car"><a href="">Bugatti</a></li>
    <li class="car"><a href="">Citroen</a></li>
    <li class="car"><a href="">Ligier</a></li>
    <li class="car"><a href="">Peugeot</a></li>
    <li class="car"><a href="">Renault</a></li>
    <li class="car"><a href="">Talbot</a></li>
</ul>

javascript:

$("#cars").click( function() {
  $(".car").toggle();
  $("#cars").toggleClass("ui-corner-bottom");
});

See it live: http://jsfiddle.net/gCkZ9/3

This is a much more dynamic & elegant solution, works with multiple lists.

<ul data-role="listview" data-inset="true">
    <li class="cars" data-role="list-divider" role="heading">French Cars</li>
    <li><a href="">Bugatti</a></li>
    <li><a href="">Citroen</a></li>
    <li><a href="">Ligier</a></li>
    <li><a href="">Peugeot</a></li>
    <li><a href="">Renault</a></li>
    <li><a href="">Talbot</a></li>
</ul>



$('#cars').click(function(){
    $(this).siblings().toggle();
    $(this).toggleClass("ui-corner-bottom");
});