Hide/Show Script

Works in IE, Not Firefox?

[TymArtist]

Hey guys,

I am trying to write some code so that when you click on the <h3>, it finds the nextSibling (which is always a div) and then shows or hides it based on whether it's already shown or hidden. It works great in IE but it won't work in Firefox

The HTML code looks a little like this:

<h3>Header</h3>
<div>
<p>Content</p>
<p>More Content</p>
</div>

There are two DOM functions - the first one finds the div tags and sets them accordingly with an onclick = function() embedded. The second one looks like this:

function createHideShow(thislist) {
var pArea = thislist.nextSibling;
// Displays the <p> and <img> tags if they are hidden
if (pArea.style.display == "none") {
pArea.style.display = "block";
}
else {
pArea.style.display = "none";
}
}

Any ideas?

[whoisgregg]

Take a look at this thread [webmasterworld.com]. :)

[Fotiman]

The problem is that the next sibling is not the <div>. It's an anonymous text box containing the whitespace between your closing </h3> and your opening <div> (which, in example you posted, includes a newline character). You could get around this by putting your <div> immediately after the closing </h3> on the same line:

<h3>Header</h3><div>

In that case, the <div> will be the next sibling. However, I would recommend that instead you do something more like this:

function createHideShow(thislist) { 
 for( pArea = thislist.nextSibling; pArea; pArea = pArea.nextSibling ) 
 { 
  if( pArea.nodeName.toLowerCase() == 'div' ) 
  { 
   // Displays the <p> and <img> tags if they are hidden 
   if (pArea.style.display == "none") { 
    pArea.style.display = "block"; 
   } 
   else { 
    pArea.style.display = "none"; 
   } 
   break; 
  } 
 } 
} 

[rocknbil]

pArea.style.display = (pArea.style.display == "none")?"block":"none";

Sorry, I have a *thing* for one-liners. :-)

I always see this as an attribute of the display property, why doesn't anyone use the visibility property?

pArea.style.visibility = (pArea.style.visibility == "visible")?"hidden":"visible";

[Fotiman]

why doesn't anyone use the visibility property?

Because visibility causes the item to still take up space in the flow, whereas when you want to hide something you typically want to remove it entirely from the flow. Why would you want this big gaping hole where the item was?

[osujit]

Try "document.getElementById()" ...
Its working for All Browsers....
If any Problem Mail Me over [e-mail]