Question

EDIT- I would like to see it written in javascript, not jquery or a framework please.

I know that this is something easily accomplished with jquery, but I’d like to learn the javascript behind the magic, and have been reading Dom Scripting by Jeremy Keith.

I’ve gotten a ways through the book, but doing examples where you copy code is far different from trying to build something yourself.

Right now I’m trying to do something simple (for others): Hide a paragraph element when the header2 element above it is clicked. Here is the HTML:

<div id="contentArea">
        <h2><a href="#">heading for the articles</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
        <h2><a href="">Second heading for the articles</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
    </div><!-- END MAIN CONTENT ---------------->

I’m trying to figure out the steps necessary to accomplish it, and can’t even really spell it out to myself in plain English, much less javascript.

I’m trying to create a block of code that would say “whenever an h2 element within the div with the id contentArea is clicked, find the next paragraph below it and hide it from view.”

Answer 1

// Select all h2 which are inside contentAread
var elems = document.getElementById('contentArea').getElementsByTagName('h2'),
i;

// For each one
for(i = 0; i < elems.length; i++)
   elems[i].onclick = function(){
        var sibling = this;
        // While there is another sibling
        while(sibling = sibling.nextSibling){
            // If sibling is a P tag
            if(sibling.nodeName == 'P'){
                // Hide it
                sibling.style.display = 'none';
                // Then exit the loop
                break;
            }
        }
    };