Collapsable Checkbox Hierarchy Tree

cozza

I want to make a form that has checkboxes of Categories and Sub Categories organized in a collapsable hierarchy tree where the clicked results can be inserted into a database. Is something like this possible to do with just PHP and MySQL? If so, can someone please point me in the direction of what I would need to learn to do this? I know how to make one that is all open, but since I'm going to have hundreds of Sub Categories, I really need to find a way to make this into a collapsable hierarchy tree. Any help would be greatly appreciated, thanks.

Below is an example of what I'd want the checkbox form to look like with all the fields exposed..

Category1
[INDENT]SubCategory1.1[/INDENT]
[INDENT]SubCategory1.2[/INDENT]
Category2
[INDENT]SubCategory2.1[/INDENT]

But I want it closed until a main Category is clicked, so it would first look like this..

Category1
Category2

This site has something similar to what I want to achieve for another example...

http://dhtmlx.com/docs/products/dhtmlxTree/samples/checkboxes/pro_mixed_checkboxes.html

theelectricwiz

This isn't possible with just php and mysql unless you have a refresh buttonthat would have to be clicked every time the user changed the selection of the categories. You need to use a bit of javascript for it. Something like:

<style>
.show {
 display:;
}
.hide {
 display: none;
}
</style>
<body>
<input type="checkbox" onclick="if(this.checked) document.getElementById('sub').className = 'show'; else document.getElementById('sub').className = 'hide';" />
<div class="hide" id="sub">
<input type="checkbox" name="sub1" />
<input type="checkbox" name="sub2" />
</div>

Hope this helps

cozza

That didn't work, but I see where you're going with this and how it wouldn't work with just PHP. I'll see if I can learn the right javascript functions to get this work.

This code didn't hide the checkboxes, they just all showed up. I think that might be because no javascript was declared in the head, but I don't know a lot about javascript, so who knows.

Thanks.

cozza

In case anyone else wants to learn how to do this. I found this post from another forum that had some javascript that worked....

http://www.webdeveloper.com/forum/showthread.php?t=101307

Thanks again for trying to help.

theelectricwiz

Whoops. Yeah, I left the dots out from in front of the class names in the style sheet (now fixed). This was just a very quick example of how you would do it.

You don't need to create a function do this (and declare it in the head) but it is best practice to do it (neater and means you can reuse the functions later).

Be careful using the other script from the webdeveloper forum, the line

var vis = (box.checked) ? "block" : "none";

should be changed

var vis = (box.checked) ? "" : "none";

if you are wanting to use the script on elements that aren't block level elements like div tags