javascript - how do I add multiple events to a collapsible list? -

javascript - how do I add multiple events to a collapsible list? -

i'm working on modification backend of shopping cart. need list product categories in collapsible nested list. i've been able code jochen:

$(function() { $('li > ul').each(function(i) { var parent_li = $(this).parent('li'); parent_li.addclass('folder'); var sub_ul = $(this).detach(); parent_li.find('a').click(function() { sub_ul.toggle(); }); parent_li.append(sub_ul); }); $('ul ul').hide(); });

but need able display products in given category when category clicked. want event cause page mysql phone call @ point , list products in div right of collapsible tree.

i'm self taught, , while i've gotten pretty @ php, has been years since did extensive in plain old javascript, , i'm afraid i'm in on head ajax , jquery. help appreciated.

i tried implement much appreciated solution posed vinceh, in spite of several days of research, have been unable figure out how utilize .data object pass category through url.

anyone have ideas on how pass info need?

thanks in advance.

i add together click event category items , send ajax request retrieve necessary items db , have sent page rendered. can binding by:

$(".someclass").click( function() { $.ajax({ url: "url/to/your/function", type: "get", datatype: "script" }); });

but thing is, need pass category item through url, can adding .data object via jquery.

once server returns information, render stuff, , depends on how framework it, have different solutions, it's simple rendering action, .append items div want.

you can add together lot of options ajax request create want, please refer this more detail. luck!

javascript jquery ajax data-binding