Checkbox Tree - Javascript?

[dpt]

I started learning HTML a couple weeks ago and Javascript last night, so bear with me.

 

My goal:

I want to build a checkbox tree in a form. The tree will have a few levels--let's say Country, State, and City. I can do this easily with nested lists in HTML, but want a few snazzy features:

a) I want to be able to expand or collapse each section of the tree. If I click "United States", I get a list of states. If I then click "Alabama" I get a list of cities in Alabama. (My current code does this, but I want to get rid of the bullets from the list formatting.)

Each country/state/city will have a checkbox by it. When I check/uncheck the "Alabama" box, I want it to automatically check/uncheck all of the boxes for Alabama cities--the boxes on that "branch". (I can't figure out how to do this. In fact, I can't figure out how to put checkboxes on any but the bottom/city level.)

c) I want the default setting (when first loaded) to be that the tree is collapsed. Right now, my code makes the default setting and expanded tree.

 

Below is the code I have thus far. Am I on the right track? What functions do I need or where can I find examples of correct checkbox tree code? Any pointers would be appreciated. Thanks.

 

 

>

</pre>
<ul>
</ul>
<a rel="">United States</a><br><br><ul>

</ul>
<a rel="">Alabama</a><br><br><br>Anniston<br><br>Auburn<br><br>Birmingham<br><br>Decatur<br><br>Dothan<br><br>Florence<br><br>Gadsden<br><br>Huntsville<br><br>Mobile<br><br>Montgomery<br><br>Tuscaloosa<br><br><br><br><br><br><ul>
</ul>
<a rel="">Arkansas</a><br><br><br>Fayetteville<br><br>Fort Smith<br><br>Jonesboro<br><br>Little Rock<br><br>Pine Bluff<br><br><br><br

[administrator]

Hi,

 

You are on the right track: the strategy of using the css 'display' property to show and hide elements is the way.

 

But I would stop trying to reinvent the wheel, especially for widgets like this ... it always best to use pre-made components. That said, I would suggest jQuery.

 

Stefan