CODEWITHSUNDEEP
javascriptcssshow-hideslidetoggle
Edison
Edison

Reputation: 109

show/hide switch

I have the following code

<input type='radio' name='showhide'></input><input type='radio' name='showhide'></input>
<br/>
<label> Some tips here!</label>

My requirement is, when the radio button is changed, the label below will be show or hidden. It is easy to implement, but my problem is, with the show or hide of the label, the layout of the whole page will be changed. I think it is because the text in the label is longer than that of radio button. Then what should I do to prevent the change of the page's layout? Thanks in advance!

Upvotes: 0

Views: 175

Answers (2)

Tamil Selvan C
Tamil Selvan C

Reputation: 20229

Use css visibility

<input type='radio' name='showhide' onclick="document.getElementById('tip').style.visibility='visible';" />
<input type='radio' name='showhide' onclick="document.getElementById('tip').style.visibility='hidden''" value="false" />

<label id="tip"> Some tips here!</label>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

First thing, there is no </input>. Another thing is you haven't given the value to the input.

<input type='radio' name='showhide' value="true" />
<input type='radio' name='showhide' value="false" />

Now, for the interaction, give an ID to the <label>.

<label id="tips"> Some tips here!</label>

And using JavaScript, you can do this:

<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='visible'" value="true" />
<input type='radio' name='showhide' onclick="document.getElementById('tips').style.visibility='hidden'" value="false" />

Upvotes: 1

Related Questions