I'm making a family tree. The following script allows the user to expand branches of the tree. It works fine, but there must be a better way.You can see it working here.$(function(){    $('.oc').prepend('<img src=icons/bullet_add.png alt=more width=16 height=16/>')    $(ul[id|=Nested]).hide();    $(a[id|=trigger_Nested]).click(function() {        var text = $(this).siblings(ul);        if (text.is(':hidden')) {            text.slideDown(fast);            $(this).next(span).html('<img src=icons/bullet_take.png alt=close width=16 height=16 />');             } else {            text.slideUp(fast);            $(this).next(span).html('<img src=icons/bullet_add.png alt=more width=16 height=16 />');             }        return false;    });});
Expanding branches of a family tree
javascript;jquery;tree
A couple notes:I would use classes instead of ids for the nested links. I don't know if it's faster to search the DOM for all elements with a specific class, but it looks cleaner and doesn't require you to create unique ids for each element:$('a.nested-trigger').click(...);I would also use classes for the icons, as it's less expensive than replacing DOM nodes:HTML:<span class=oc collpased></span>CSS:.oc {  position: relative;  right: 10px;  display: inline-block;  width: 16px;  height: 16px;}.collapsed {  background: url(icons/bullet_add.png);}.expanded {  background: url(icons/bullet_take.png);}JS:$(this).next(span).removeClass(collapsed).addClass(expanded);This is related more to the UX of your demo but I would make the icons themselves clickable as well, because they're big enough to look like buttons, and they overlap part of the node.