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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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>
_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')



Kamilek0617Author Commented:
I don't understand.  How do you change the code to do that?
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

_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.
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.
_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>
_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";
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"
_agx_Commented:
Yeah, that's what @coldfusionwebdev mentioned already. There was just a small typo in their code.
Kamilek0617Author Commented:
I don't get it.  someone please paste the complete code.  I keep combining that you have and it doens't work.
_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>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kamilek0617Author Commented:
No it doesn't.  It always displays all text and never hides anything.
_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"

?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.