Question

I am looking for a Javascript solution for this problem. I have the following HTML:

<div id = "container">
  <div id = "data">
    <div>
      <h3> Address</h3>
      <b>Expand...</b>
      <div id="content">ul. Pomorska</div>
    </div>
    <div>
      <h3> Telefon </h3> <b>Expand...</b>
      <div id="content">26565352</div>
    </div>
    <div>
      <h3>Email</h3>
      <b>Expand...</b>
      <div id="content">[e-mail]</div>
    </div>
  </div>
</div>

I would like to hide the content div when an onclick Expand is made. So far I have made a function which hides the content divs and tries to assign an event handler to the node.

function hideinfo() {
  var node = document.getElementById("data");
  var contactdata = node.getElementsByTagName("div");
  for(var i=0; i<contactdata.length;i++) {
    if(contactdata[i].id == "content") {
      alert(contactdata[i].previousSibling.innerHTML);
      contactdata[i].previousSibling.addEventListener('click',ShowHide,false);
      contactdata[i].style.display="none";
    }
  }
}

The problem is that the alert displays undefined. Why can’t it see the node? Is there a better way to do this in Javascript?

Answer 1

Because previousSibling is most likely the text node before the div element. You probably want to use previousElementSibling instead 🙂

In most browser today, querySelectorAll, which lets you use CSS selectors for finding elements, is also a good alternative (IE8+)