JQuery Mobile Collapsible Set with header with subheaders open only one at a time

Question

Following is the Js fiddle which I tried :

My JSFiddle

Below is my HTML :

                   <div data-role="collapsible" data-theme="b" data-collapsed="false">
                   <h3>Sell</h3>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Andy Stenberg</span>
                                    <span class="span-confidence" style="background-color:red"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:2139090090">(213)909-0090</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Los Angeles</span>
                                    <div id="confid-sellrate1"></div>
                                </div>
                            </div>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Halle Berry</span>
                                    <span class="span-confidence" style="background-color:orange"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:xxxxxxxxxx">(xxx)xxx-xxxx</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Hollywood Hills,LA</span>
                                    <div id="confid-sellrate2"></div>
                                </div>
                            </div>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Cierra Quigg</span>
                                    <span class="span-confidence" style="background-color:orange"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:XXXXXXXXXX">(XXX)XXX-XXXX</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Burbank</span>
                                    <div id="confid-sellrate3"></div>
                                </div>
                            </div>
                  </div>

                    </div>

Can anyone help me in making the subheaders to open only one at a time ?

Answer 1

Working example: http://jsfiddle.net/Gajotres/rK8KK/

HTML:

<div data-role="collapsible" data-theme="b" class="expand-lead">
    <h3>Sell</h3>    
    <div data-role="collapsible-set" data-theme="b" data-collapsed="false">  
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Andy Stenberg</span>
                <span class="span-confidence" style="background-color:red"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:2139090090">(213)909-0090</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Los Angeles</span>
                <div id="confid-sellrate1"></div>
            </div>
        </div>
        
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Halle Berry</span>
                <span class="span-confidence" style="background-color:orange"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:xxxxxxxxxx">(xxx)xxx-xxxx</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Hollywood Hills,LA</span>
                <div id="confid-sellrate2"></div>
            </div>
        </div>
        
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Cierra Quigg</span>
                <span class="span-confidence" style="background-color:orange"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:XXXXXXXXXX">(XXX)XXX-XXXX</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Burbank</span>
                <div id="confid-sellrate3"></div>
            </div>
        </div>
    </div>
</div>