jquery-mobile: Collapsible inside list-view

Question

I want to use some collapsible elements inside a listview in jquery mobile. I can set well the collapsible adding a inside the corresponding

part, but when the collapsible is not collapsed, the info of collapsible is not inside the collapsible bubble, how can I fix that to have a bubble that include title and description?

Thanks

<div id="dispositivo" data-role="page" data-theme="c" data-cache="refresh">
<div data-role="content" role="main">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
            <li data-role='list-divider'>Titulo</li>
            <form id="form_disp" name="form_disp" method="post" action="test.php"> 
                <li data-role='fieldcontain'>
                    <a id="estado" name="estado" href="#" data-theme="b" data-role="button" data-inline="true">Boton</a>                
                <div data-role="content" data-inset="true">
                    <div data-role="collapsible" data-inset="true">
                        <h3>Info1</h3>
                        <p>Ahora estamos viendo el info 1</p>
                    </div>
                    <div data-role="collapsible">
                        <h3>Info 2</h3>
                        <p>Ahora estamos viendo el info 2</p>
                    </div>
                </div>
            <button data-theme="b" id="b_conf_disp" data-role="button" data-inline="true" type="submit">Boton 2</button>
        </form>
        </ul>
    </div>      
</div>

Upvotes: 1

Views: 5935

Answer 1

For something similar you can try using the plugin I wrote that allows certain listview items to be opened inline within the listview.

The Github Repo

Answer 2

I think you missed </li> tag.