Navigate jQuery Mobile nested listview within a div

Question

I'm trying to put a nested list on a page into a div element, and it works fine, until I click some of the items, having descendant elements — in this case nested list redraws the whole page to display the children.

All the examples I found, display the same behavior. For example, jQuery Mobile Demos page: http://demos.jquerymobile.com/1.4.5/listview-nested-lists/

Is there any way to display and navigate a nested set element without replacing the page?

You could use collapsibles to expand the nodes that have children. — ezanker
– ezanker, Commented Dec 4, 2014 at 14:31
Yes, I know. But the task is to use the nested listview only. I could, probably, make the same behavior using only lists and transitions, but it will take much time. I hope, someone has a workaround to make nested listview open its children within a container. — Rodion Baskakov
– Rodion Baskakov, Commented Dec 4, 2014 at 14:37

Tasos · Accepted Answer · 2014-12-04 15:50:05Z

1

I'm not sure what exactly you are trying to achieve but you could slide them Up and click to slide them Down using (next)

$(".hide").next().slideUp('fast');
$(".hide").click(function(e) {
$(this).next().slideToggle('fast');
})

Demo

http://jsfiddle.net/2u020dqa/

answered Dec 4, 2014 at 15:50

Tasos

5,3491 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rodion Baskakov Over a year ago

Thank you, but this solution doesn't fit my needs. It looks like an 'accordion', but I need something, what looks like the example on the link in my question (a list with arrows on the right if has children) and when you tap/click it, it slides to the left, and the descendant menu reveals from the right side.

Rodion Baskakov Over a year ago

Yes, this solution is much closer to what I'm looking for. I need to navigate a tree this way: chose one node from a list and click it, then see the next list of nodes. If some of the nodes have children, display an arrow to make it possible to go deeper.

Tasos Over a year ago

thats no problem. when you click on an item, clone the whole list, and append a new one with data. when you go back append the clone list. Basic Demo. try "Infiniti, G37" jsfiddle.net/z5sa9z5g

Collectives™ on Stack Overflow

Navigate jQuery Mobile nested listview within a div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related