473,385 Members | 1,876 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > trying to get hide/show element to work

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Trying to get hide/show element to work

219 100+
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
11 3700
Logician
210 100+
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
dmorand
219 100+
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
dmorand
219 100+
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
1,137 1GB
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
Logician
210 100+
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
dmorand
219 100+
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
Logician
210 100+
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
dmorand
219 100+
I got around it by doing this:

if (which.style.display=="")
which.style.display="block"
Oct 16 '07 #9
Logician
210 100+
I got around it by doing this:

if (which.style.display=="")
which.style.display="block"
I think you meant 'none'.
Oct 16 '07 #10
dmorand
219 100+
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
dmorand
219 100+
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

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

Similar topics

2
Hide table/row
by: John M | last post by:
I want to hide the first row in my table and if a user click on a show button than show it. If it is visible than user can hide it with click a hide button. In default I hide it with: <tr...
Javascript
19
JavaScript - HIDE/DISPLAY text boxes
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
Javascript
3
DIV/IFRAME hide/show problem onMouseOut - please help :)
by: Ryh | last post by:
I have the following scritpt. It hides div layer when mouse is out of the div layer. Inside DIV I have IFRAME box. Unfortuantely it does not work in Mozilla or IE 5.5. It hides div when cursor is...
Javascript
10
show/hide a table row
by: oLE | last post by:
I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...
Javascript
3
show/hide thingy
by: alex | last post by:
I'd like to have a show/hide widget on my web site, kind of like "show details" / "hide details" in Google Groups. Is there a tutorial explaining how to make them? Google's is a bit complex and...
Javascript
4
Hide / Show form Elements.
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
Javascript
7
Show/Hide text field
by: FP | last post by:
I'm new to Java Script. I'm displaying comments people have made. Below each persons' comment I want to add 2 buttons "Reply" and "Amend". Clicking "Reply" would display an empty text field...
Javascript
11
hide all divs without array?
by: dusk | last post by:
Hi, I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy. I have several different pages to write, each with about...
Javascript
6
Trying to hide an img control upon command
by: Doogie | last post by:
Hi I have an img control I am trying to hide upon certain types of commands in my code behind. When to hide it is directly tied to a asp:dropdownlist control. So depending on what the user...
ASP.NET
1
Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
General
0
isladogs
Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
General
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!