Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Location
    In a house
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How can i hide all UL elements?

    Does anyone know how to hide all elements with the same tag.
    I have a expanding menu and want to hide all the elements when the page first loads.

    my basic menu structure looks like this...
    <ul id="100">
    <li>Root
    <ul id="100200">
    <li>sub menu
    <ul id="100200300">
    <li>sub-sub menu
    <ul id="100200300400">
    <li>sub-sub-sub menu
    <ul id="100200300400500">
    <li>sub-sub-sub-sub menu
    <ul id="100200300400500600">
    <li>action</li>
    <li>action</li>
    <li>action</li>
    <li>action</li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

    i basically want to have the menu closed when the page loads except for the root UL element (id="100"). I then use javascript to open and close the menu.

    Thanks in advance
    Mike

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Location
    In a house
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved

    Never Mind, i have solved the problem while browsing the site...
    Code:
    function loader() {
    	var dls = document.getElementsByTagName("ul");
    	for (i=0;i<dls.length;i++) {
    			var dds = dls[i].getElementsByTagName("ul");
                            for(j=0;j<dds.length;j++){dds[j].style.display="none";}
    	}
    }

  • #3
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For one, element id values should not be a number.

    If you want to hide all contained UL's, then loop through, starting from the collection:

    document.getElementById("_100").getElementsByTagName("LI")

    and give each UL a className corresponding to the style of "display:none"

    edit: or search the site...
    Last edited by codegoboom; 02-27-2005 at 07:52 PM. Reason: blah
    *this message will self destruct in n-seconds*

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, any valid id must start with either an underscore or an upper or lower case English alpha letter [_a-zA-Z]. So you need to change that code somewhat.

    Second, it's help if you told us how you wanted to expand the menu. CSS or JavaScript? Click or hover? Should it contract when the mouse leaves them or not? Should they contract after some time or directly. Should they animate in some way?

    The easiest way is to use CSS to simply not display them, but override that for the root element by using it's id. Another approach is to use JavaScript to contract them when the page has just finished loading.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

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