Collapse part of items in a list

Question

I'd like to create a list of webradio stations using JQuery Mobile. Parts of the list (like the stations name and the genre tags) should be permanently visible, while other parts (like the url or comments) should be collapsed and only get uncollapsed on demand.

To clarify my requirements I made an example:

<div data-role="content">
    <ul data-role="listview">
        <li>
            <h2>Item 1</h2>
            <div class="tag-list">
                <span class="tag">Tag A</span>
            </div>
            <div class="comment-list">
                <div class="comment">
                    <p>This is a comment</p>
                </div>
                <div class="comment">
                    <p>Another comment</p>
                </div>
            </div>
        </li>
    </ul>
</div>

(better viewed here: http://jsfiddle.net/uAvpS/1/)

Only comment-list and comment should be collapsed, the rest should always be visible.

How can this be achieved? In my point of view this is different to collapsible lists

Answer 1

Give each li a data-role="collapsible" and inside its' header, add your custom span which hold tags.

Demo

<li data-role="collapsible">
  <h2>Item 1<span class="tag-list"><span class="tag">tag 1</span></span></h2>
  <div class="comment">
    <p>This is a comment</p>
  </div>
  <div class="comment">
    <p>Another comment</p>
  </div>
</li>