50 users online (0 members and 50 guests)  

Thread: Simple tree


  Results 1 to 8 of 8

Related

  1. Replies: 0
  2. Tree structure in HTML    Forum: ASP Forum
    Replies: 0
  1. #1
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Simple tree

    I need some code which can create a simple tree.
    I found a lot codes by searching google, but they all
    were to advanced. I only need a plus/minus symbol
    which I can click, and then some text, images and
    tables appear/disappear... Can somebody help me?

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: Simple tree

    What was too advanced about the scripts you found? That type of control is inherently complex.

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Simple tree

    Hi there adamsen,

    is this too complicated for your requirements...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>show/hide info</title>
    
    <style type="text/css">
    .container {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:0.9em;
        margin:4px 0;
     }
    .container img {
        width:16px;
        vertical-align:bottom;
     }
    .container span {
        font-weight:bold;
        cursor:pointer;
     }
    .off {
        display:none;
    }
    .on {
        width:400px;
        margin:10px 30px;
        text-align:justify;
        color:#003;
        background-color:#eef;                  
    }
    </style>
    
    <script type="text/javascript">
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    function init(){
       obj=document.getElementById('wrapper');
       spn=obj.getElementsByTagName('span');
    for(c=0;c<spn.length;c++) { 
       document.getElementById('div'+c).className='off';
    spn[c].onclick=function() {
    if(this.id!='') {
       stuff(this.id.split('s')[1]);
        }
       }
      }
     }
    function stuff(n) {
    
      dvs=obj.getElementsByTagName('div');
      ims=obj.getElementsByTagName('img');
      info=document.getElementById('div'+n);
      pic=document.getElementById('img'+n);
                                                         
    for(c=0;c<dvs.length;c++) {
    if((dvs[c].className=='on')&&(dvs[c].id!='div'+n)) {
       dvs[c].className='off';                          
      }
     }
    for(c=0;c<ims.length;c++) {
       ims[c].src='plus.GIF';
     }
    if(info.className=='on') {
       info.className='off';
       pic.src='plus.GIF'; 
    }
    else {
       info.className='on';
       pic.src='minus.GIF';                     
      }
     }
    
    </script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <span id="s0"><img id="img0" src="plus.GIF" alt="">John Smith</span>
    <div id="div0">John Smith stuff</div>
    </div>
    
    <div class="container">
    <span id="s1"><img id="img1" src="plus.GIF" alt="">Frank Furter</span>
    <div id="div1">Frank Furter stuff</div>
    </div>
    
    <div class="container">
    <span id="s2"><img id="img2" src="plus.GIF" alt="">Mary Contrary</span>
    <div id="div2">Mary Contrary stuff</div>
    </div>
    
    <div class="container">
    <span id="s3"><img id="img3" src="plus.GIF" alt="">Joe Bloggs</span>
    <div id="div3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    </div>
    
    </div><!-- end #wrapper -->
    
    </body>
    </html>
    

  4. #4
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Re: Simple tree

    Hi coothead
    Thanks, good code, but can you change the code so I can have more than one container open at same time?

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Simple tree

    Hi there adamsen,
    ...but can you change the code so I can have more than one container open at same time?
    No problem, here you go...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>show/hide info</title>
    
    <style type="text/css">
    .container {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:0.9em;
        margin:4px 0;
     }
    .container img {
        width:16px;
        vertical-align:bottom;
     }
    .container span {
        font-weight:bold;
        cursor:pointer;
     }
    .off {
        display:none;
    }
    .on {
        width:400px;
        margin:10px 30px;
        text-align:justify;
        color:#003;
        background-color:#eef;                  
    }
    </style>
    
    <script type="text/javascript">
    
    if(window.addEventListener){
       window.addEventListener('load',init,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',init);
      }
     }
    
    function init(){
    
       obj=document.getElementById('wrapper');
       spn=obj.getElementsByTagName('span');
    
    for(c=0;c<spn.length;c++) { 
       document.getElementById('div'+c).className='off';
       spn[c].number=c;
    
    spn[c].onclick=function() {
       stuff(this.number);
       }
      }
     }
    function stuff(n) {
    
      dvs=obj.getElementsByTagName('div');
      ims=obj.getElementsByTagName('img');
      info=document.getElementById('div'+n);
      pic=document.getElementById('img'+n);
                                                         
    if(info.className=='on') {
       info.className='off';
       pic.src='plus.GIF'; 
     }
    else {
       info.className='on';
       pic.src='minus.GIF';                     
      }
     }
    
    </script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <div class="container">
    <span><img id="img0" src="plus.GIF" alt="">John Smith</span>
    <div id="div0">John Smith stuff</div>
    </div>
    
    <div class="container">
    <span><img id="img1" src="plus.GIF" alt="">Frank Furter</span>
    <div id="div1">Frank Furter stuff</div>
    </div>
    
    <div class="container">
    <span><img id="img2" src="plus.GIF" alt="">Mary Contrary</span>
    <div id="div2">Mary Contrary stuff</div>
    </div>
    
    <div class="container">
    <span><img id="img3" src="plus.GIF" alt="">Joe Bloggs</span>
    <div id="div3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 
    nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu, 
    ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate 
    ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta 
    bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
    </div>
    </div>
    
    </div><!-- end #wrapper -->
    
    </body>
    </html>
    

  6. #6
    adamsen's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Jan 2009
    Location
    Denmark
    Posts
    128

    Re: Simple tree

    Thanks

  7. #7
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Simple tree

    No problem, you're welcome.

  8. #8
    sns5684's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2009
    Location
    Washington
    Posts
    1

    Re: Simple tree

    Hello Coothead,

    Could you show me how to add more elements under each node? For example, in each <span>, how can we add more <div>?

    thx



Tags for this Thread