Solved

Hidden Div - Javascript CSS

Posted on 2010-08-13
13
417 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…

839 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