Easily show/hide a web control

An easy way to show and hide a control is to use a combination of the display:none CSS property, and the .show() and .hide() JQuery methods.

Let’s say you have a Yes/No set of radio buttons, and you want a show a simple message if the user makes a specific selection?

<div>
   <input id="RadioYes" type="radio" value="Yes" onChange="showYesMessage();" />Yes
   <input id="RadioNo" type="radio" value="No" onChange="hideYesMessage();" />No
   <label id="YesMessage" style="display:none;">Thanks!</label>
</div>

<script>
function showYesMessage() {
   $("#YesMessage").show();
}

function hideYesMessage() {
   $("#YesMessage").hide();
}
</script>

Subscribe

0 comments