By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,133 Members | 1,092 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,133 IT Pros & Developers. It's quick & easy.

Trying to get hide/show element to work

100+
P: 219
I'm having some trouble with my javascript which is supposed to hide/show a div element. I have to click on the link twice before it'll hide. I can't seem to figure out why the first click does nothing.

Expand|Select|Wrap|Line Numbers
  1. function hideshow(which){
  2.     if (!document.getElementById)
  3.         return
  4.     if (which.style.display=="block")
  5.         which.style.display="none"
  6.     else
  7.         which.style.display="block"
  8.  
Expand|Select|Wrap|Line Numbers
  1. <cfform name="accessRequestFrm" method="post" action="accessRequestSubmit">
  2. <a href="javascript:hideshow(document.getElementById('generalFS'))">Show/Hide General Information</a>
  3.  <fieldset id="generalFS">
  4.  <legend>General Information</legend>
  5.  <ol>
  6.  <li><cfoutput><label>Date of Request:</label> <cfinput type="text" size=6 name="RequestDate" value=#DateTime# validate="date" message="Date Format: mm/dd/yyyy"></cfoutput>
  7.         <strong>required</strong></li>
  8.             <li><label>Requested By:</label> <cfinput type="text" size=25 name="requestedBy" required="yes" message="Please enter requested by"></li>
  9.        <li><label>Access Just Like:</label> <cfinput type="text" size=25 name="accessJustLike"></li>
  10.             <li><label>Conf Agreement on File:</label> 
  11.                 <cfinput class="noBox" type="radio" size=3 name="cfonFile" value="Yes" checked>Yes
  12.                 <cfinput class="noBox" type="radio" size=3 name="cfonFile" value="No">No</li>
  13.             <li><label>Current User:</label>
  14.               <cfinput class="noBox" type="radio" size=3 name="currentUser" value="Yes">Yes
  15.                 <cfinput class="noBox" type="radio" size=3 name="currentUser" value="No" checked>No
  16.             </ol>
  17.           </fieldset>
  18.  
Oct 16 '07 #1
Share this Question
Share on Google+
11 Replies


100+
P: 210
Expand|Select|Wrap|Line Numbers
  1. if (which.style.display=="block")
  2.  which.style.display="none"
  3. else
  4.  which.style.display="block"
  5.  
  6.  
Try alerting the initial value of which.style.display.
Oct 16 '07 #2

100+
P: 219
Try alerting the initial value of which.style.display.
I added alert(which.style.display); to the beginning of the function.

The first time I click it, there's nothing in the alert. The second time it says block.
Oct 16 '07 #3

100+
P: 219
I added alert(which.style.display); to the beginning of the function.

The first time I click it, there's nothing in the alert. The second time it says block.
It seems that the first time I click, nothing is being passed to the function, but the second time it is.
Oct 16 '07 #4

Death Slaught
100+
P: 1,137
Maybe this will help, it's an example of a working hide/show script.

I'll give you two examples and a reason why to use one over the other.

[HTML]<html>
<head>
<script langauge="JavaScript"
type="text/javascript">
function showHide(show, hide) {
document.getElementById(show).style.visibility =
"visible";
document.getElementById(hide).style.visibilty =
"hidded";
}
</script>
</head>
<body>
<p>&nbsp;<br />&nbsp;</p>
<p id="tab1"
style="position: absolute; top: 5px;">
Tab1
</p>
<p id="tab2"
style="position: absolute; top: 5px; left: 5px; visibility: hidden;">
Tab2
</p>
<form>
<input type="button" value="Tab 1"
onclick="showHide('tab1', 'tab2');" />
<input type="button" value="Tab 2"
onclick="showHide('tab2', 'tab1');" />
</form>
</body>
</html>
[/HTML]

As you will see, the absolute positioning leads to some subtle differences across browsers. The best way is to use a block layout and set the display property of the element to either block or none:

[HTML]<html>
<head>
<script langauge="JavaScript"
type="text/javascript">
function showHide(show, hide) {
document.getElementById(show).style.display =
"block";
document.getElementById(hide).style.display =
"none";
}
</script>
</head>
<body>
<p id="tab1">
Tab1
</p>
<p id="tab2" style="display: none;">
Tab2
</p>
<form>
<input type="button" value="Tab 1"
onclick="showHide('tab1, 'tab2');" />
<input type="button" value="Tab 2"
onclick="showHide('tab2', 'tab1');" />
</form>
</body>
</html>
[/HTML]

Sorry I don't have time to explain it right now, but I hope it helps, Death
Oct 16 '07 #5

100+
P: 210
It seems that the first time I click, nothing is being passed to the function, but the second time it is.
No, if that were the case you would get an error saying "'which' is undefined", so the alert is showing the default value.
Oct 16 '07 #6

100+
P: 219
No, if that were the case you would get an error saying "'which' is undefined", so the alert is showing the default value.
So when I first click it there's no display style?
Oct 16 '07 #7

100+
P: 210
So when I first click it there's no display style?
No - that would generate a similar error message. You're being told that the value is "".
object.style reads inline sylesheets.

Either style your object inline display:block or change the code to
Expand|Select|Wrap|Line Numbers
  1. if(obj.style.display!='none')
  2.  obj.style.display='none';
  3. else
  4.  obj.style.display='block';
  5.  
  6. /*OR*/
  7.  
  8. var disp=obj.style.display;
  9.  
  10. disp=(disp=='none') ? 'block' : 'none';
  11.  
  12.  
Oct 16 '07 #8

100+
P: 219
I got around it by doing this:

if (which.style.display=="")
which.style.display="block"
Oct 16 '07 #9

100+
P: 210
I got around it by doing this:

if (which.style.display=="")
which.style.display="block"
I think you meant 'none'.
Oct 16 '07 #10

100+
P: 219
I think you meant 'none'.
I left it as "block" because there's an if after that which checks for block and if block, sets to none.

Expand|Select|Wrap|Line Numbers
  1. function hideshow(which){
  2.     if (which.style.display=="")
  3.         which.style.display="block"
  4.     if (!document.getElementById)
  5.         return
  6.     if (which.style.display=="block")
  7.         which.style.display="none"
  8.     else
  9.         which.style.display="block"
  10. }
  11.  
Oct 17 '07 #11

100+
P: 219
Ok, I changed it:

Expand|Select|Wrap|Line Numbers
  1. function hideshow(which){
  2.     if (!document.getElementById)
  3.         return;
  4.     if (which.style.display==""){
  5.         which.style.display="none";
  6.         return;
  7.     }
  8.     if (which.style.display=="block")
  9.         which.style.display="none";
  10.     else
  11.         which.style.display="block";
  12. }
  13.  
Oct 17 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.