DOM Question

programming web dev
1

hey trying to make a script so when i click on a certain link it will hide a “ul” element then make it reappear. Now im really really really close. but i got one issue. I can make the link itself dissapear but it will not let me reference the ul element. here is the html so u can get an idea of the dom structure.


    <div id="menu">
        <p><a href="#" >Section One</a></p>
        <ul>
            <li><a href="#">section one part i</a></li>
            <li><a href="section001.htm">section one part ii</a></li>
        </ul>
     </div>

here is all the javascript. The issue is with the function “mouseGoesDown”


var W3CDOM = (document.createElement && document.getElementsByTagName);

window.onload = init;

    function init()
    {
       

        if (!W3CDOM) return;
        var nav = document.getElementById('menu');
        var sections = nav.getElementsByTagName('p');
           
        for (var i=0;i<sections.length;i++)
        {
            sections*.firstChild.onclick = mouseGoesDown;
        }
    }

    
  function mouseGoesDown()
    {
     
        var nextSibStatus = (this.parentNode.nextSibling.style.display == 'none') ? 'block' : 'none';
            this.parentNode.nextSibling.style.display = nextSibStatus;
               this.style.border = ('1px #666 solid');
            this.style.backgroundColor = '#888';
            this.style.color = '#552278';
            return false;
    }

Now if i change “this.parentNode.nextSibling…” to just “this.parentNode” the actual paragraph will be hidden so i know im at the paragraph so the ul element should be the nextSibling but i get nothing…

Any help with this would be fantastic. Been trying to wrap my head around it but im just lost as to why nextSibling will not work.