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.

    $('.oc').prepend('<img src="icons/bullet_add.png" alt="more" width="16" height="16"/>')
    $("a[id|=trigger_Nested]").click(function() {
        var text = $(this).siblings("ul");
        if (text.is(':hidden')) {
            $(this).next("span").html('<img src="icons/bullet_take.png" alt="close" width="16" height="16" />');     
        } else {
            $(this).next("span").html('<img src="icons/bullet_add.png" alt="more" width="16" height="16" />');     

        return false;

1 Answer 1


A couple notes:

  1. 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:

  2. I would also use classes for the icons, as it's less expensive than replacing DOM nodes:


    <span class="oc collpased"></span>


    .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);


  3. 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.

  • \$\begingroup\$ All very good points. I especially agree with seand's 3rd point. I tried to click the icons and was thinking the whole thing didn't work for a second. \$\endgroup\$
    – nickles80
    Dec 18, 2012 at 4:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.