jQuery Mobile - collapsibles mixed with normal list items

Question

Having a hard time getting this to work, here is what I want:

-Collapsible
---Item 1
---Item 2
---Item 3
-Normal list view item with link
-Collapsible
---Item 1
---Item 2
---Item 3

So basically I want a normal listview item with a link surrounded by collapsible elements.

I have tried using accordions and listviews, but so far I haven't gotten anywhere close.

<ul data-role="listview">
    <li>
        <div data-role="collapsible">
            <h3>Invite</h3>
            <ul data-role="listview" data-inset="false">
                <li><a href="#">Email Invite</a></li>
                <li><a href="#fb_invite">Facebook Invite</a></li>
                <li><a href="#twitter_invite">Twitter Invite</a></li>
                <li><a href="#address_book_invite">Address Book Invite</a></li>
            </ul>
        </div>
    </li>
    <li><a href="#">Normal item!</a></li>
</ul>

This creates the functionality just fine, the problem is that the collapsible list has the visual aspect of a button, I want it to looks exactly like the normal li item.

Any approach to solve this issue is welcome.

Answer 1

I was bored so I made you 2 different solutions.

Solution 1:

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

HTML :

<ul data-role="listview" id="custom-listview">
    <li class="custom-li">
        <div data-role="collapsible" class="custom-collapsible">
            <h3>Invite</h3>
            <ul data-role="listview" data-inset="false">
                <li><a href="#">Email Invite</a></li>
                <li><a href="#fb_invite">Facebook Invite</a></li>
                <li><a href="#twitter_invite">Twitter Invite</a></li>
                <li><a href="#address_book_invite">Address Book Invite</a></li>
            </ul>
        </div>
    </li>
    <li class="custom-li-last"><a href="#">Normal item!</a></li>
</ul>

CSS :

.custom-collapsible {
    margin: 0 !important;   
}

.custom-collapsible h3 a {
    border-radius: 0 !important;
    border-width:0 !important; 
    border-bottom-width: 1px !important; 
}

.custom-li {
    padding: 0 !important;
}

.custom-li-last {
    border-top-width: 0 !important; 
}

Solution 2 - Inset version

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

HTML :

<ul data-role="listview" data-count-theme="c" data-inset="true">
    <li class="custom-li">
        <div data-role="collapsible" class="custom-collapsible">
            <h4>Heading</h4>
            <ul data-role="listview">
                <li><a href="#">List item 1</a></li>
                <li><a href="#">List item 2</a></li>
                <li><a href="#">List item 3</a></li>
            </ul>
        </div>
    </li>
    <li class="custom-bottom-li"><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

CSS :

.custom-li {
    padding: 0 !important;
    border-width:0 !important;
}

.custom-bottom-li {
    border-top-width: 0 !important;  
}

.custom-collapsible {
    margin: 0 !important;   
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width:0 !important;
}