Best way to hide and unhide HTML elements

[Buppy]

Hi,

I have a HTML document with form. The form has several radio buttons. I want different elements of HTML (including <input> elements) to appear when each radio button is selected. Also, it is intended to show only those elements for a specific radio button. For example, if i select RB1, it shows me element div 1 and hides all others. If i select RB2, it hides element div 1 and shows element div 2, et cetera. So far it works fine with .style.visibility = 'hidden' and 'block'. Now, here comes the problem - each element appears below the previous element, they appear as they are in the HTML, no matter if i show the previous one. It looks pretty bad, because element positions are jumping as i select different radio buttons. How do i keep them in the same level, at the same position?

Regards

[skald89]

Im very new at this and what Im going to suggest may be completely wrong or the stupidest way to do what you want to do.
I would use the show/hide behavior in dreamweaver.

< your tag for the button
onClick="MM_showHideLayers('layer/div','','hide','layer/div','','show')">

[hielo]

It would help if you actually post the HTML you are using. As for:

//element.style.visibility = 'hidden' and 'block'
element.style.visibility  ==> visible OR hidden
element.style.display     ==> none OR block OR inline

So if you have an input and next to is is the element you want to display (like a span), then use display:inline. If you were to use display:block, then it would appear on a line by itself.

[Troy III]

Hi,

I have a HTML document with form. The form has several radio buttons. I want different elements of HTML (including <input> elements) to appear when each radio button is selected. Also, it is intended to show only those elements for a specific radio button. For example, if i select RB1, it shows me element div 1 and hides all others. If i select RB2, it hides element div 1 and shows element div 2, et cetera. So far it works fine with .style.visibility = 'hidden' and 'block'. Now, here comes the problem - each element appears below the previous element, they appear as they are in the HTML, no matter if i show the previous one. It looks pretty bad, because element positions are jumping as i select different radio buttons. How do i keep them in the same level, at the same position?

Regards

It's because you are using visibiliy instead of display property.

You only need to correct your code from ".style.visibility = 'hidden'and 'block'- [which is a 'css error' by the way]" with a display property: .style.display = 'none'; and/or .style.display = 'block'; correspondingly, and it will go away.