Collapsible list items #5539

Closed
jukooz opened this Issue Jan 27, 2013 · 11 comments

Projects

None yet

2 participants

@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
jQuery Foundation member

@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
jQuery Foundation member

Related ticket #5415

@jaspermdegroot
jQuery Foundation member

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
jQuery Foundation member

@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
jQuery Foundation member

@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
jQuery Foundation member

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.

@jaspermdegroot
jQuery Foundation member

Closing as feature request. After releasing 1.4 final we are going to update the roadmap and set a specific milestone. The ticket will be re-opened when we are going to work on implementing the feature.

@jaspermdegroot
jQuery Foundation member

Looks like it's already possible so let's add a demo for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment