How do I get my invisible Textboxes to get visible if I click a radio button?

Question

I wrote an asp C# WebApplication.

I need to "fade" in asp textboxes if I click a certain radio button. (They need to fade in as soon as I click the radio button). How can I do that?. Should I use JS for this?

Answer 1

You can use JavaScript to create "behavior" and CSS to add styles and effects.

Here an example using simple JavaScript, with no requirement for jQuery or other libraries. The script assume you are hiding your element using a combination of visibility and opacity .

It works in this way:

• Listen to event change on your radio button.
• When user select radio button.
• Select radio button and add class fadeout .
• CSS class fadeout contains a transition which create your animation effect.

CSS transitions, provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. Read more here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

 var txtBox = document.getElementById('txtBox'); var radioMale = document.getElementById('radioMale'); radioMale.addEventListener('change', function() { txtBox.classList.add('fadeout'); }.bind(this)); 

 .fadeout { visibility: hidden; opacity: 0; transition: visibility 0s 1s, opacity 1s linear; } 

 <input type="radio" name="gender" value="male" id="radioMale"> Male <br> <input type="text" id="txtBox"> <br> 

---

Here an example for the reverse, where you can "fade in" with an animation your text box when an user select a radio button.

 var txtBox = document.getElementById('txtBox'); var radioMale = document.getElementById('radioMale'); radioMale.addEventListener('change', function() { txtBox.classList.add('fadein'); }.bind(this)); 

 .fadeout { visibility: visible; opacity: 0; } .fadein { visibility: visible; opacity: 100; transition: visibility 0s 1s, opacity 1s linear; } 

 <input type="radio" name="gender" value="male" id="radioMale"> Male <br> <input type="text" id="txtBox" class="fadeout"> <br> 

Answer 2

try this

1) your HTML

<p>Show textboxes
    <input type="radio" name="radio1" id="r1" value="Show">Do nothing
    <input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
    <p>Textbox #1
        <input type="text" name="text1" id="text1" maxlength="30">
    </p>
</div>
<div class="text">
    <p>Textbox #2
        <input type="text" name="text2" id="text2" maxlength="30">
    </p>
</div>

2) Js code

  $(document).ready(function () {
    $("#r1").click(function () {
        $(".text").fadeIn();
    });
    $("#r2").click(function () {
        $(".text").fadeOut();
    });
});