Question

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.

Answer 1

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>