Creating a list with an accordion-style list item with jQuery mobile

Question

I am working on a jQuery mobile site, that will be converted into an Android app with PhoneGap.

I have a list of cars, under a collapsible heading. I might have other lists, of vehicles such as boats or planes.

What I want to be able to achieve is an accordion functionality on that individual list item, so for example, someone may click on the Audi, and it drops down with information about that particular car. (At the moment, the link goes to an external page.)

What is the "official" or "best" way of achieving this?

My code is below, but I have also put it in a jsFiddle here. The text underneath the Aircraft carrier link is roughly the functionality I am trying to achieve, but it should only show when clicking on that list item.

            <div data-role="collapsible" data-theme="b" data-content-theme="c">
            <h2>Choose a car model...</h2>
            <ul data-role="listview">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>

            </ul>
        </div>

            <div data-role="collapsible" data-theme="b" data-content-theme="c">
            <h2>Choose a boat model...</h2>
            <ul data-role="listview">
                <li><a href="index.html">Speedboat</a></li>
                <li><a href="index.html">Aircraft Carrier</a></li>
                                    <p><br />test info</p>
            </ul>
        </div>

Answer 1

Here's a working example: http://jsfiddle.net/Gajotres/eELYZ/

You only need to remove a tag from li element. It is called a readonly listview: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-readonly.html

<ul data-role="listview">
    <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </li>
    <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </li>        
</ul>

EDIT :

<div data-role="collapsible" data-theme="b" data-content-theme="c" id="outer-collapsible">
    <h2>Choose a boat model...</h2>    
    <div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible">
        <h2>Choose a boat model...</h2>    
        <ul data-role="listview">
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>        
        </ul>
    </div>
    <div data-role="collapsible" data-theme="c" data-content-theme="c" id="inner-collapsible">
        <h2>Choose a boat model...</h2>    
        <ul data-role="listview">
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>
            <li>
                <h3>Stephen Weber</h3>
                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
            </li>        
        </ul>
    </div>    
</div>

New working example: http://jsfiddle.net/Gajotres/eELYZ/