My website(php) has some categories and corresponding sub categories.
I want to display them in tree structure.
First of all the categories should be displayed with a plus sign , when someone clicks the plus sign , below categories should slide down and corresponding sub categories should display.
This is very common thin i found on many web sites but unable to find how to do it.
pls suggest how to implement this structure.
Thanks.
Use jQuery, my demo js (this is a plugin wrote in 3 minutes):
(function($){
$.fn.subcath = function() {
return this.each(function() {
obj = $(this);
var subcath=$('.subcath', obj);
alert(obj.html());
obj.click(function (){
subcath.toggle('slow');
});
});
}})(jQuery);
HTML:
<SCRIPT language="JavaScript" SRC="jquery.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="my_plugin.js"></SCRIPT>
<script>
$().ready(function() {
$('.subcath').hide();
$('.menu').subcath();
});
</script>
<ul class='menu'>
<div class="cathegory" >
<li class="cath" >Cath1</li>
<div class="sub_cathegory" >
<ul class="subcath">
<li class="sub_el" >Cath1</li>
<li class="sub_el" >Cath2</li>
</ul>
</div>
</div>
<div class="cathegory" >
<li class="cath" >Cath1</li>
<div class="sub_cathegory" >
<ul class="subcath">
<li class="subcath_el" >Cath3</li>
<li class="subcath_el" >Cath4</li>
</ul>
</div>
</div>
</ul>
where (M) (V) (C) points to MVC application structure, see:
http://oreilly.com/php/archive/mvc-intro.html
You can do it using a Nested set model or an Adjecency list. Read up on those, there's a lot of example code available. For more information, read http://en.wikipedia.org/wiki/Tree_(data_structure) .