473,554 Members | 2,844 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Making an element hidden then visible

3 New Member
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
  1. function(x) {
  2. document.getElementById('element1').style.visibility = 'hidden';
  3. document.getElementById('element2').style.visibility = 'hidden';
  4. document.getElementById('element3').style.visibility = 'hidden';
  5. document.getElementById(x).style.visibility = 'visible';
  6. }
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
4 4480
5,390 Recognized Expert Moderator Expert
the following code (basicly the same as yours) works in firefox:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="text/javascript">
  3. function foo(x) {
  4.     document.getElementById('element1').style.visibility = 'hidden';
  5.     document.getElementById('element2').style.visibility = 'hidden';
  6.     document.getElementById('element3').style.visibility = 'hidden';
  7.     document.getElementById(x).style.visibility = 'visible';
  8. }
  9. </script>
  11. <body onload="foo('element2');">
  12.     <div id="element1">foo</div>
  13.     <div id="element2">foo</div>
  14.     <div id="element3">foo</div>
  15. </body>
  16. </html>
how do you call the method? does the problem occur with a specific browser?

kind regards
Aug 4 '09 #2
3 New Member
I'm using Firefox too. The function is called from within an onclick command. Like this:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script type="text/javascript">
  3. function foo(x) {
  4. document.getElementById('element1').style.visibility = 'hidden';
  5. document.getElementById('element2').style.visibility = 'hidden';
  6. document.getElementById('element3').style.visibility = 'hidden';
  7. document.getElementById(x).style.visibility = 'visible';
  8. }
  9. </script>
  10. <body onload="foo('element2');">
  11. <div id="element1">foo</div>
  12. <div id="element2">foo</div>
  13. <div id="element3">foo</div>
  15. <a onclick="foo(element1)">change</a>
  17. </body>
  18. </html>
Aug 4 '09 #3
5,390 Recognized Expert Moderator Expert
your call is wrong since the id needs to be passed as a string ... so use:

Expand|Select|Wrap|Line Numbers
  1. 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
3 New Member
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

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

Similar topics

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 the entire page visible again. How do I do that?
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 question and tell me where my code is going wrong that I am getting things to load incorrectly. The situation is this: The owner wants "picture...
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 "visible" when an error is found. I have the same edit on the server (MS says that I should perform the edits in both places). I have set the "ID"...
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 = $doc->loadHTMLFile("./aBasicSearchResult.html"); if ( $res == true ) { $zip = $doc->getElementById('zipRaw_id')->value; if ( 0 != $zip ) {
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 tier things. I want the topmost/first data element in a particular control to NOT be displayed. This should be possible by either telling the...
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 these tags by setting style="visible" here the problem is, the hidden items also occupy the space on html form is there any other ways such that all...
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=""; document.getElementById(el).scrollIntoView(true); so basically, the element was hidden, but I am setting it to
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 http://www.thejackofclubs.net/images/soc_concept4.png ) and I want to change the current navbar (which is right now generated via PHP using tables and outdated expressions). The...
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 indicate to the recipient (me!) that the mail can be archived without reading (It is a "Job ran successfully" note). It makes writing message...
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...
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...
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...
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...
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...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
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...

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.