Making an element hidden then visible

HI there, is it possible to make an element hidden, then make it visible again in the same function?

I have a number of elements, only one of which should be visible at any time. The users can click to make different ones visible.

The code basically does this:

Expand|Select|Wrap|Line Numbers

 
function(x) {

document.getElementById('element1').style.visibility = 'hidden';

document.getElementById('element2').style.visibility = 'hidden';

document.getElementById('element3').style.visibility = 'hidden';

document.getElementById(x).style.visibility = 'visible';

}

Where x will always be element1, 2 or 3.

However the last line seems to be ignored. If I try and set visible and hidden in the same piece of code it seems that hidden just overrides. Is there any way around this?

Aug 4 '09 #1

Subscribe Post Reply

4476

gits

5,390

Expert Mod 4TB

the following code (basicly the same as yours) works in firefox:

Expand|Select|Wrap|Line Numbers

 <html>

<script type="text/javascript">

function foo(x) {

    document.getElementById('element1').style.visibility = 'hidden';

    document.getElementById('element2').style.visibility = 'hidden';

    document.getElementById('element3').style.visibility = 'hidden';

    document.getElementById(x).style.visibility = 'visible';

}

</script>
 
<body onload="foo('element2');">

    <div id="element1">foo</div>

    <div id="element2">foo</div>

    <div id="element3">foo</div>

</body>

</html>

how do you call the method? does the problem occur with a specific browser?

kind regards

Aug 4 '09 #2

vershner

I'm using Firefox too. The function is called from within an onclick command. Like this:

Expand|Select|Wrap|Line Numbers

 
<html>

<script type="text/javascript">

function foo(x) {

document.getElementById('element1').style.visibility = 'hidden';

document.getElementById('element2').style.visibility = 'hidden';

document.getElementById('element3').style.visibility = 'hidden';

document.getElementById(x).style.visibility = 'visible';

}

</script>

<body onload="foo('element2');">

<div id="element1">foo</div>

<div id="element2">foo</div>

<div id="element3">foo</div>
 
<a onclick="foo(element1)">change</a>
 
</body>

</html>

Aug 4 '09 #3

gits

5,390

Expert Mod 4TB

your call is wrong since the id needs to be passed as a string ... so use:

Expand|Select|Wrap|Line Numbers

foo('element1')

in your onclick handler. unless you do so the parameter is treated as a variable and will be undefined unless you would define it ...

kind regards

Aug 5 '09 #4

vershner

Ah that was a typo, my actual code has the quotes. However, I think there must have been another typo somewhere else, because after rearranging things it's now working. Thanks for your help anyway.

Aug 5 '09 #5

Similar topics

making your page invisible then visible

by: Stuart Wexler | last post by:

Hi, I have span tag around my form-- which is basically my entire page-- that sets the display to none. I want to, after running through some javascript care of the body onload event, make...

Javascript

Page Is Making No Sense!

by: Sens Fan Happy In OH | last post by:

I'm having majour issues with FrontPage 2K and a webpage that I am having to create from scratch based on someone else's prior work. I hope someone can look at the source code for the page in...

HTML / CSS

Finding and HTML Element

by: Jim Heavey | last post by:

I have a message which is surrounded by a <P> and the Visibility is set to "Hidden". I have some Javascript which validates information which is keyed on the screen and sets the Visibility to...

ASP.NET

DOM doc - simple find element

by: one man army | last post by:

Hi All- I am new to PHP. I found FAQTS and the php manual. I am trying this sequence, but getting 'no zip string found:'... PHP Version 4.4.0 $doc = new DomDocument; $res =...

PHP

I'm lazy: how do I make the first databound record not display/chop off the first element from SqlDataSource

by: | last post by:

I'm using ASP.NET 2.0, C#, SQL Server 2005, and databound controls like the DataList and the GridView. Right now I'm using SqlDataSource as part of very quick and dirty site; I'm not looking to...

ASP.NET

by: parag1234567 | last post by:

Hi, I am dynamically generating a html file which will contain only <div> tags which contents are hidden from user( set by style="visibility:hidden") Now the next step is i am enabling some of...

Javascript

is element in browser windows or not?

by: Jan Eliasen | last post by:

Hi This problem is a little but difficult for me to explain, but I hope you will get the idea. I have some javascript code, where I: document.getElementById(el).style.display="";...

Javascript

Making new Div bar

by: HACKhalo2 | last post by:

Hi. I'm helping a friend of mine develop an online game, which is currently outdated. The person making skins for the site came up with a cool looking NavBar (found at...

PHP

Making text invisible

by: Swifty | last post by:

I'm sending an HTML email to Lotus Notes and I'd like to hide some text from casual observation. There is nothing sinister in this; the text to be hidden is simply a 12-digit number that I use to...

HTML / CSS

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

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

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

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

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

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

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++