SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    None close all the UL

    Dear All,
    I have a javascript as below. My problem is that span.onclick I have tried to run a for loop and set all the ul.style.display to none but it all disappear. What I want to achieve is that if one of the tree plus button is click I want all the rest to be closed?


    PHP Code:
    this.sitemapstyler = function(){
        var 
    sitemap document.getElementById("sitemap")
        if(
    sitemap){
            
            
    this.listItem = function(li){
                if(
    li.getElementsByTagName("ul").length 0){
                    var 
    ul li.getElementsByTagName("ul")[0];
                    
    //alert("NAme is :"+ul);
                    
    ul.style.display "none";
                    var 
    span document.createElement("span");
                    
    span.className "collapsed";
                    
    span.onclick = function(){
                        
                        
                        
                        
    //alert("ul.style.display :"+ul.style.display );
                        
    ul.style.display = (ul.style.display == "none") ? "block" "none";
                        
    this.className = (ul.style.display == "none") ? "collapsed" "expanded";
                    };
                    
    li.appendChild(span);
                };
            };
            
            var 
    items sitemap.getElementsByTagName("li");
            for(var 
    i=0;i<items.length;i++){
                
    //alert("I :"+i+"LEngth :"+items.length);
                
    listItem(items[i]);
            };
            
        };    
    };

    window.onload sitemapstyler

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear All,
    I have a javascript as below. My problem is that span.onclick I have tried to run a for loop and set all the ul.style.display to none but it all disappear. What I want to achieve is that if one of the tree plus button is click I want all the rest to be closed?
    The standard technique to achieve this is to first hide all of them, and to then show only the one that is applicable.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Here is what I have added further on the codes and the link is here http://183.78.169.54/tree/2.html.

    span.onclick = function(){

    var form1= document.getElementById('form1');
    var uls = form1.getElementsByTagName("ul");
    uls.style.display = "none";
    uls.className = "collapsed";
    //alert("ul.style.display :"+ul.style.display );
    ul.style.display = (ul.style.display == "none") ? "block" : "none";
    this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
    };

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Here's where the problem is currently occurring:

    Code:
    var uls = form1.getElementsByTagName("ul");
    uls.style.display = "none";
    What's happening is that uls is an array-like list of elements, but the next line is treating it as if it were a single element instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have added this and whole thing get hidden when I press any of the plus sign at this link http://183.78.169.54/tree/2.html.

    var uls = form1.getElementsByTagName("ul");
    for (var i = 0; i < uls.length; i++)
    {
    uls[i].style.display = "none";
    uls[i].className = "collapsed";
    }

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I have added this and whole thing get hidden when I press any of the plus sign at this link http://183.78.169.54/tree/2.html.
    Does that indicate that you need to better understand what is going on, or to start over from scratch?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Can your hint where is my mistake? Then that will be helpful.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Can you give me a better understand of where I am making the mistake? Is guess is a slight mistake some where right?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It looks like you have it working now, well done.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Yes I have done maybe you comment if something is not right.
    I don't quite understand why we need the span n how it control the opening n closing of the tree.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Yes I have done maybe you comment if something is not right.
    I don't quite understand why we need the span n how it control the opening n closing of the tree.
    I would think that it's because your activation is the plus/minus symbol that's contained within the span.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •