Search jQuery

jQuery Forum

jQuery Mobile

i_am_will

Listview with collapsable listview inside

in jQuery Mobile • 10 years ago

HI guys,

I've been experimenting around with the listview but can't seem to find a good solution for the following issue.

Maybe one of you guys knows a solution, else I need to submit it as an new idea.

I have the following list:

* Country 1 (inside should be collapsed)

* City 1

* City 2

* City 3

* Country 2 (inside should be collapsed)

* City x

I've implemented it as a listview, since that gives me some nice features like the search (data-filter).

But the trouble starts with the nested ones. Since 1.3.0 nested is deprecated (and it never worked like it should have).

My current workaround is listview + collapsable + listview, but that gives al sorts of issues (like double search-bars, broken layouts etc.).

Question:

What would be the suggested way to implement this?

Many thanks!

Live example: http://www.shabbyplaces.com/welcome/#list

Replies(5)

Shreerang

Re: Listview with collapsable listview inside

10 years ago

@i_am_will how about having country1 and country2 as collapsible lists and then city 1, city 2, etc inside of these collapsible lists as the regular list item.

i_am_will

Re: Listview with collapsable listview inside

10 years ago

Hi Shreenrangp,

I've tried that, but the result is that it's not searchable.

Or collapsible lists should offer some search feature, like lists do.

Shreerang

Re: Listview with collapsable listview inside

10 years ago

@i_am_will your requirement is not very clear to me. Is it that you want your list items within collapsible lists and search the collapsible lists? Or is it case 2 where you have the list items within collapsible lists and a search within each collapsible list?

In case your requirement is case 1, I found a couple of fiddles and here are the links. However, these are fiddles based on JQM 1.1.1 and Jquery 1.7.1. You will need to update these to the latest or the versions that you are using.

1. http://jsfiddle.net/2Vg4z/
2. http://jsfiddle.net/Awg8W/2/

In case your requirement is case 2, then you can take a look at a fiddle that I have created for my blog Spatial Unlimited.

Cheers!
Shreerang
Web Developer

i_am_will

Re: Listview with collapsable listview inside

10 years ago

@Shreerang:

Again, many thanks.

I've been able to fix my issue using your second link with the following code:

<li>

<h3>Firs Collapsed list</h3>

<li><a href="index.html">Acura</a></li>

</ul>

</div>

</li>

<li>

<h3>Second Collapsed list</h3>

<li><a href="index.html">Cadillac</a></li>

<li><a href="index.html">Chrysler</a></li>

<li><a href="index.html">Dodge</a></li>

</ul>

</div>

</li>

</ul>

If you run this code out of the box you will get 3 search-bars.

What I didn't see before is that you can fix this with css:

#page .ui-listview-filter:nth-child(n+2) {

display : none;

}

i_am_will

Re: Listview with collapsable listview inside

10 years ago

Well... it broke again after an upgrade to 1.3.1, but the fix was easy:

#page .ui-listview-filter:nth-of-type(n+2) {

display : none;

}

And thanks to http://css-tricks.com/examples/nth-child-tester/

Top Reply

Response title

Attachments

jQuery Forum

Listview with collapsable listview inside

Replies(5)

Re: Listview with collapsable listview inside

Re: Listview with collapsable listview inside

Re: Listview with collapsable listview inside

Re: Listview with collapsable listview inside

Re: Listview with collapsable listview inside

Statistics

Tags

Actions