1,105,384 Community Members

Best way to hide and unhide HTML elements

Member Avatar
Buppy
Junior Poster
113 posts since Nov 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
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

Member Avatar
skald89
Junior Poster
103 posts since Oct 2008
Reputation Points: 2 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
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')">
Member Avatar
hielo
Veteran Poster
1,131 posts since Dec 2007
Reputation Points: 55 [?]
Q&As Helped to Solve: 246 [?]
Skill Endorsements: 0 [?]
 
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.
Member Avatar
Troy III
Practically a Posting Shark
891 posts since Jun 2008
Reputation Points: 174 [?]
Q&As Helped to Solve: 119 [?]
Skill Endorsements: 10 [?]
 
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.

Question Answered as of 3 Years Ago by skald89, hielo and Troy III
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article