I am a web developer, designer, and consultant located in the La Crosse / Onalaska Wisconsin region with
over twelve years experience developing and managing projects ranging from large applications and cloud-based
business solutions to social/new media campaigns, to complete system and infrastructure implementation.Simple jQuery Expand/Collapse Unordered Lists
Awhile ago I needed a simple expand/collapse list (UL) for a client's site. There are a TON of 'tree' plugins, but nothing simple, so I wrote one.
It will handle any (properly formed) unordered list and will add <a> tags as needed to be used as actuators for the expand/collapse function. If you're UL already has <a> tags for each list item it will simply skip over them.
Demo:
Check out the (very simple) demo of the jqcollapse plugin.
Implementation:
$('#ELEMENT_ID').jqcollapse({ slide: true, speed: 1000, easing: 'easeOutCubic' }); Parameters:
slide: whether or not the expand/collapse motion should have a slide effect (default: true)
speed: the speed of the slide effect (default: 300)
easing: optional easing should you decide to implement the easing plugin
The only styling (which is optional) is for nodes that have children. The <a> tag that is associated with them will get the class 'jqcNode' which can be styled (as in my demo) to stand out.
Download:
Download the jqcollapse plugin (27kb)
Responses to this Article:
Loading Comments...