Collapsible list items

[jukooz]

At the time being, to mix listviews and collapsibles you need to make some nasty things. Example I will show is really bad, but just want to quickly show that you need to do some mess one way or another.

http://jsfiddle.net/MK4uR/3/

Tested on desktop firefox and Android internal browser.

[jaspermdegroot]

@jukooz

I think there are a few things we can improve here. For example, collapsible (sets) nested in another collapsible could get a negative margin to negate the padding on the collapsible content div. Also, I think that a collapsible heading and a list item should both have same padding so they have the same height.

I made a cleaner version of your example: http://jsbin.com/izohig/7 (http://jsbin.com/izohig/7/edit). Would be good to have an example like this in our new Docs & Demos

However, since we wan't to replace the current way we handle nested lists anyway, I think a collapsible is a good alternative. That would mean you don't have to combine listviews and collapsible, but the framework would treat a list item that has a nested list as a collapsible. This is just my opinion though. Have to see what we are going to do with this.

[jukooz]

Thank you for cleaning it up. Your idea of treating list item that has a nested list as a collapsible is perfect in my opinion. Simple, intuitive, without a mess.

[jaspermdegroot]

Related ticket #5415

[jaspermdegroot]

We will be using #5415 as ticket for collapsibles for nested lists. Adding a "panel styling" demo that shows how it can be done with custom CSS.

[jukooz]

In my opinion #5415 is big overhead for someone who wants to create simple menu with collapsibles. He needs to create new page for every collapsible list of links? How to implement it in any CMS? Nested/dropdown/multi-level menus are on almost 1/2 of all the websites - it is important. l'll be using your css customizations mentioned above cause in my opinion it's 100x better solution than #5415.

[jaspermdegroot]

@jukooz

We just use #5415 as a ticket for a new way of handling nested lists. That doesn't mean we are going to implement it like that.
I agree with keeping this simple. Just make a list item collapsible if it contains a nested UL. Same as my example, but better semantic markup and no need for custom CSS.
The example as shown at #5415 could be added to the new demos.

[jukooz]

O, ok. I was little bi surprised when I read it, but didn't understand it correctly.

[jaspermdegroot]

@jukooz

Actually this is my mistake. Somehow I had in mind that #5415 was about displaying nested lists in the list itself, but it's more about fetching any content in a list. That is confusing. Sorry, I should have read better.

Re-opening this ticket so we can use it for new way of handling nested listviews.

Changed the title. Original: "Make mixing listviews and collapsibles easy"

[jaspermdegroot]

Some notes:
We should also make turning the LI into a collapsible optional so people don't have to wrap nested lists in a div to prevent the collapsible. For example when the LI that contains the UL has a link as well.
We could add data-nested-theme so people can style the LI's in the nested UL differently.