CSS/java Expand/collapse function for parent/child trees

I'd like to be able to expand / collapse the ancestry and child trees using CSS and javascript.

I'm trying to create a unique id for each "relativity-ancestor-block" class and have it so that when clicking a link IE: "+" the next level of ancestors above that node is shown. And so on.

I don't know the functions well enough to know where to put my indexing variable and when do index it.

So far, in the "theme_relativity_ancestor" function, I've got:

if ($indent == "block") {
	$hide = "unhidden";
	$block_num = $block_num + 1;
	} else {
	$hide = "hidden";
	}

$ancestor_box .= "\n" . '<div id="block-id-' . $block_num . '" class="' . $hide . ' relativity-ancestor-' . $display_option . ' relativity-ancestor-' . $indent . '"> ';

$ancestor_box .= l(t($ancestor_node->field_title[0]['safe'] . " " . $ancestor_node->title), 'node/' . $ancestor_node->nid, array('class' => 'relativity_view_' . $ancestor_node->type)) . " <a href='javascript:unhide(block-id-" . $block_num . ");'>+ </a>";

However this doesn't give me anything useful. I'm a newbie so any help is good help.