JQuery Mobile - stacks with regular list items

Question

With difficulty making it work, this 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 regular list item with a link surrounded by dumped items.

I tried using accordions and lists, but so far I have not closed anywhere.

 <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 functionality just fine, the problem is that the drop-down list has a visual aspect of the button, I want it to look exactly like a regular li element.

Any approach to solving this problem is welcome.

Answer 1

I was bored, so I made you 2 different decisions.

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 - Insert 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; }