Start New Discussion within our Web Development Community

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

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

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.

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.