Solved

Hidden Div - Javascript CSS

Posted on 2010-08-13
13
420 Views
Last Modified: 2012-05-10
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>
0
Comment
Question by:Kamilek0617
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 1

Expert Comment

by:coldfusionwebdev
ID: 33434699
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
 
LVL 52

Expert Comment

by:_agx_
ID: 33434805
(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
 

Author Comment

by:Kamilek0617
ID: 33436122
I don't understand.  How do you change the code to do that?
0
How To Install Bash on Windows 10

Windows’ budding partnership with Canonical has certainly led to some great improvements. One of them being the ability to use Bash on your Windows machine without third party applications! This might be one of the greatest things a cloud engineer in a Windows environment can do!

 
LVL 52

Expert Comment

by:_agx_
ID: 33438311
@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
 

Author Comment

by:Kamilek0617
ID: 33445292
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
 
LVL 52

Expert Comment

by:_agx_
ID: 33456803
<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
 
LVL 52

Expert Comment

by:_agx_
ID: 33456822
>> 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
 

Expert Comment

by:mahalasa
ID: 33456851
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
 
LVL 52

Expert Comment

by:_agx_
ID: 33457919
Yeah, that's what @coldfusionwebdev mentioned already. There was just a small typo in their code.
0
 

Author Comment

by:Kamilek0617
ID: 33466085
I don't get it.  someone please paste the complete code.  I keep combining that you have and it doens't work.
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 33467493
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
 

Author Comment

by:Kamilek0617
ID: 33479465
No it doesn't.  It always displays all text and never hides anything.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 33483997
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article  is about submitting  form through  ColdFusion.Ajax.submitForm to the action page and send a response back in JSON format which later can be decoded using ColdFusion.JSON.decode. By this way you can avoid the usual page refresh for subm…
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question