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

yes! If you formulate an anser I could accept it. Great work! — speendo, Jul 08 '13 at 21:53

Omar · Accepted Answer · 2013-07-08T22:20:52.167

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>

edited Jul 08 '13 at 22:20

answered Jul 08 '13 at 22:14

Omar

32,302
9
69
112

thank you! I just want to add, it does only work with `
`s inside of the header element.
– speendo Jul 09 '13 at 06:13
oh sorry, I wanted to write >>also<< not >>only<< my bad! Thank you once again! – speendo Jul 09 '13 at 08:55
@speendo welcome buddy. I have updated the demo if you want to have a look :) – Omar Jul 09 '13 at 08:58
wow, that looks neat... do you have an idea how one could merge the outer part of each item with the inner part (the one with the +button)? In my oppinion the inner part looks somehow lost... I know this is a different question, so no need to answer that ;) – speendo Jul 09 '13 at 09:02
@speendo you mean filling `li` with collapsible button? – Omar Jul 09 '13 at 09:45
yes, filling the `li` with the collapsible button (just repeating to get the min characters ;-) ) – speendo Jul 09 '13 at 09:56

Collapse part of items in a list

1 Answers1