Trying to get hide/show element to work

219 New Member

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

 
function hideshow(which){

    if (!document.getElementById)

        return

    if (which.style.display=="block")

        which.style.display="none"

    else

        which.style.display="block"

Expand|Select|Wrap|Line Numbers

 
<cfform name="accessRequestFrm" method="post" action="accessRequestSubmit">

<a href="javascript:hideshow(document.getElementById('generalFS'))">Show/Hide General Information</a>

 <fieldset id="generalFS">

 <legend>General Information</legend>

 <ol>

 <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>

        <strong>required</strong></li>

            <li><label>Requested By:</label> <cfinput type="text" size=25 name="requestedBy" required="yes" message="Please enter requested by"></li>

       <li><label>Access Just Like:</label> <cfinput type="text" size=25 name="accessJustLike"></li>

            <li><label>Conf Agreement on File:</label> 

                <cfinput class="noBox" type="radio" size=3 name="cfonFile" value="Yes" checked>Yes

                <cfinput class="noBox" type="radio" size=3 name="cfonFile" value="No">No</li>

            <li><label>Current User:</label>

              <cfinput class="noBox" type="radio" size=3 name="currentUser" value="Yes">Yes

                <cfinput class="noBox" type="radio" size=3 name="currentUser" value="No" checked>No

            </ol>

          </fieldset>

Oct 16 '07 #1

Subscribe Reply

3730

Logician

210

New Member

Expand|Select|Wrap|Line Numbers

if (which.style.display=="block")

which.style.display="none"

else

which.style.display="block"

Try alerting the initial value of which.style.dis play.

Oct 16 '07 #2

dmorand

219

New Member

Try alerting the initial value of which.style.dis play.

I added alert(which.sty le.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

New Member

I added alert(which.sty le.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

Top Contributor

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="JavaS cript"
type="text/javascript">
function showHide(show, hide) {
document.getEle mentById(show). style.visibilit y =
"visible";
document.getEle mentById(hide). style.visibilty =
"hidded";
}
</script>
</head>
<body>
<p> <br /> </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="showHi de('tab1', 'tab2');" />
<input type="button" value="Tab 2"
onclick="showHi de('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="JavaS cript"
type="text/javascript">
function showHide(show, hide) {
document.getEle mentById(show). style.display =
"block";
document.getEle mentById(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="showHi de('tab1, 'tab2');" />
<input type="button" value="Tab 2"
onclick="showHi de('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

New Member

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

New Member

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

New Member

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

 
if(obj.style.display!='none')

 obj.style.display='none';

else

 obj.style.display='block';
 
/*OR*/
 
var disp=obj.style.display;
 
disp=(disp=='none') ? 'block' : 'none';

Oct 16 '07 #8

dmorand

219

New Member

I got around it by doing this:

if (which.style.di splay=="")
which.style.dis play="block"

Oct 16 '07 #9

Logician

210

New Member

I got around it by doing this:

if (which.style.di splay=="")
which.style.dis play="block"

I think you meant 'none'.

Oct 16 '07 #10

Similar topics

54971

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 id="ds" style="display:none"> but how can I make it visible or hide it dynamicaly? Is it possible to do it not with TR but with TABLE?

Javascript

6937

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 in this code from a couple different sites but I'm not 100% sure what each line is doing...This is the ASP code that I'm using for the page....Take a look at the JavaScript code and please let me know what each line is doing....I have been...

Javascript

14448

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 inside IFRAME. NOte that IFRAME is inside DIV so it should not hide DIV. It Works fine in IE6.0. Could any one help? Example:

Javascript

4665

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 with the javascript in a toggle fashion. the problem is a know very little javascript and have become incredibly frustrated because i went ahead thinking it was going to be like C. its not. I know i can use these lines to do the actual work:

Javascript

2957

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 it's easy to get something wrong. If the browser does not support the required features, I want it to generate a completely static page with the "details" shown automatically.

Javascript

8014

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) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';

Javascript

29157

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 below the comment with a spell check & submit button. Clicking "Amend" would display the same buttons & text field but pre-populated with the original comment. Using Java Script how do I show / hide the text field in my list of comments but have...

Javascript

7850

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 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it. I can hide all divs and display...

Javascript

3219

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 selects in that dropdownlist, this image will be hidden or be displayed. I have tied the onselectedindexchanged value of the dropdownlist to a c-sharp method (not javascript) because other things are being done as well that I want to do server side. ...

ASP.NET

9714

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10350

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10351

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

10096

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

9174

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7638

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6866

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5534

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3002

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General