0

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

Edited by Buppy: n/a

4
Contributors
3
Replies
5
Views
6 Years
Discussion Span
Last Post by Troy III
0

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')">

Edited by skald89: n/a

0

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

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.