Member Avatar for 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

Edited by Buppy because: n/a
  • 4 Contributors
  • 3 Replies
  • 708 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for 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')">
Edited by skald89 because: n/a
Member Avatar for 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.
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.