Hidden Div - Javascript CSS

I have the following.  It works in Chrome and Safari.  Why doesn't it work in Firefox.  How do I change it to get it to work in Firefox?

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>


<body>

<script type="text/javascript" language="javascript">
<!--
function ShowText() {
   if (document.all.ShowText.style.display=="none")
      (document.all.ShowText.style.display="block");
    else
      (document.all.ShowText.style.display="none");
   }

// -->

</script>
<h1 onclick="ShowText()" class="DescriptionBot">click to display text below</h1>

<h3 id="ShowText"  style="display:none;" class="DescriptionBot">  
Text to display on click
</h3>

</body>



</html>
Kamilek0617Asked:
Who is Participating?
 
_agx_Commented:
The code from answer 33456803 works exactly as is ...  


<script type="text/javascript" language="javascript">
function ShowText() {
      var elem = document.getElementById('ShowText');
      var isVisible = elem.style.display == "block";
      elem.style.display = isVisible ? "none" : "block";
}

</script>
<h1 onclick="ShowText()" class="DescriptionBot">click to display text below</h1>
<div id="ShowText"  style="display:none;" class="DescriptionBot">  
Text to display on click
</div>
0
 
coldfusionwebdevCommented:
Here's the code fixed so that it works in Firefox:


<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>


<body>

<script type="text/javascript" language="javascript">

function ShowText() {
   if (document.getElementById('ShowText').style.display == "none") {
      document.getElementById('ShowText').style.display = "block";
}
    else {
      getElementById('ShowText').style.display = "none";
   }

}

</script>
<h1 onclick="ShowText()" class="DescriptionBot">click to display text below</h1>

<div id="ShowText"  style="display:none;" class="DescriptionBot">  
Text to display on click
</div>

</body>



</html>
0
 
_agx_Commented:
(no points please ...)

>> Why doesn't it work in Firefox

Because you're using "document.all". Long ago that was part of the proprietary IE model.  Though it may be supported in some newer browsers, the better, and more compatible way, is to use DOM syntax coldfusionwebdev showed in their example.

ie
document.getElementById('ShowText')



0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Kamilek0617Author Commented:
I don't understand.  How do you change the code to do that?
0
 
_agx_Commented:
@Kamilek0617,

Just use coldfusionwebdev's example. His code shows exactly how to do it.

I was explaining _why_ your old code doesn't work, so you understood how to write any new code to make it compatible in all browsers.
0
 
Kamilek0617Author Commented:
coldfusionwebdev: almost but when clicking on the "click to display text below" once the text shows below, like it should, but clicking on it the second time doesn't hide it.
0
 
_agx_Commented:
<script type="text/javascript" language="javascript">
function ShowText() {
      var elem = document.getElementById('ShowText');
      var isVisible = elem.style.display == "block";
      elem.style.display = isVisible ? "none" : "block";
}

</script>
<h1 onclick="ShowText()" class="DescriptionBot">click to display text below</h1>
<div id="ShowText"  style="display:none;" class="DescriptionBot">  
Text to display on click
</div>
0
 
_agx_Commented:
>> clicking on it the second time doesn't hide it.

coldfusionwebdev's example also works with a small typo correction: Just change this line:

      getElementById('ShowText').style.display = "none";

To:

      document.getElementById('ShowText').style.display = "none";
0
 
mahalasaCommented:
define id to every element. Then u can either hide or display the element by using

//to hide element

document.getElementById("").style.display="none"



//to display element

document.getElementById("").style.display="block"
0
 
_agx_Commented:
Yeah, that's what @coldfusionwebdev mentioned already. There was just a small typo in their code.
0
 
Kamilek0617Author Commented:
I don't get it.  someone please paste the complete code.  I keep combining that you have and it doens't work.
0
 
Kamilek0617Author Commented:
No it doesn't.  It always displays all text and never hides anything.
0
 
_agx_Commented:
It works perfectly in all browsers I tested (IE, FF, etc..). So something is different in your environment.

1) Are you using the +exact+ code posted
2) What's your browser?
3) What's the CSS definition for class="DescriptionBot"

?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.