471,887 Members | 1,427 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

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
  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 4384
5,390 Expert Mod 4TB
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
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 Expert Mod 4TB
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
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

Post your reply

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

Similar topics

2 posts views Thread by Stuart Wexler | last post: by
7 posts views Thread by Sens Fan Happy In OH | last post: by
1 post views Thread by Jim Heavey | last post: by
27 posts views Thread by one man army | last post: by
9 posts views Thread by Jan Eliasen | last post: by
1 post views Thread by HACKhalo2 | last post: by
26 posts views Thread by Swifty | last post: by
reply views Thread by YellowAndGreen | last post: by

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.