469,579 Members | 1,112 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,579 developers. It's quick & easy.

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 4318
gits
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>
  10.  
  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>
  14.  
  15. <a onclick="foo(element1)">change</a>
  16.  
  17. </body>
  18. </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
  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
By using this site, you agree to our Privacy Policy and Terms of Use.