Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hidden Div - Javascript CSS

Posted on 2010-08-13
13
Medium Priority
?
422 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
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
[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

 
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 2000 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
In response to a need for security and privacy, and to continue fostering an environment members can turn to for support, solutions, and education, Experts Exchange has created anonymous question capabilities. This new feature is available to our Pr…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …

885 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