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>

Gajotres · Accepted Answer · 2013-03-27T14:16:56.370

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/

That's almost what i'm trying to achieve, but the text has actually replaced the boat list item. What I need, is that text to appear when you click on one of the list items. So if I click Acura, the stephen weber bit would then appear underneath. — Wayneio, Mar 27 '13 at 13:36
So basically you want collapsible under collapsible? One collapsible will lead to an another collapsible and that one will lead to normal readonly listview? — Gajotres, Mar 27 '13 at 13:39
Yes, basically each list item would have a collapsible underneath it when it is clicked on. — Wayneio, Mar 27 '13 at 13:40
I edited Gajotres` fiddle, maybe this [fiddle](http://jsfiddle.net/eELYZ/1/) fits your needs? — Imperative, Mar 27 '13 at 14:05
That's exactly what I needed! Thank you. @Imperative, your help is also appreciated. — Wayneio, Mar 27 '13 at 14:26

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

1 Answers1