show and hide when radio button is clicked

Question

I have a radio button

@Html.RadioButtonFor(model => model.flag, "RA", htmlAttributes: new { @id = "Roflag2", })
Call for Addl. Particulars   

and a div

IF radio button is clicked then this div shown otherwise hide,

How can i do this?

Ali Benchaaban · Answer

Hello Use this code within your ASP.NET code @Html.RadioButtonFor(model => model.flag RA new { id = Roflag2 }) Call for Addl. Particulars This is the content inside the div. @section Scripts { $(document).ready(function() { // Initially hide the div $('#callfor').hide(); // Listen for change event on radio button $('#Roflag2').change(function() { // Check if the radio button is checked if ($(this).is(':checked')) { // Show the div if radio button is checked $('#callfor').show(); } else { // Hide the div if radio button is not checked $('#callfor').hide(); } }); }); } Regards BENCHAABAN Ali

Naimish Makwana · Answer

You can use jQuery to achieve this. Here’s a simple example: $(document).ready(function() { $('#Roflag2').change(function() { if(this.checked) { $('#callfor').show(); } else { $('#callfor').hide(); } }); }); In this code we’re using the change event to detect when the radio button’s state changes. If the radio button is checked ( this.checked is true ) we show the div with $('#callfor').show() . If the radio button is not checked we hide the div with $('#callfor').hide() . Please note that this code assumes that you have included the jQuery library in your project. If you haven’t you can include it with the following line in your HTML file: This line should be placed in the section of your HTML file. If you’re already using a different version of jQuery you don’t need to include this line. Also please ensure that the radio button and the div have the correct ids ( Roflag2 and callfor respectively) as specified in the jQuery selectors ( $('#Roflag2') and $('#callfor') ). If the ids are different you should replace Roflag2 and callfor with the actual ids. This code should be placed in a tag either in the section (if you’re using $(document).ready() ) or at the end of the section of your HTML file. Remember to test this code thoroughly to ensure it works as expected in your specific application context. Let me know if you have any questions! Thanks

Garima Bansal · Answer

below is the div @if (Model.remarkscrunity == Y) { @Html.ActionLink(General Remarks remarkscrunity Inspection new { @applnno = Model.applnno } htmlAttributes: new { @class = btn btn-orange turbolinks style = font-size: 18px @HttpMethodConstraint = Post }) &#10004; } else { @Html.ActionLink(General Remarks remarkscrunity Inspection new { @applnno = Model.applnno } htmlAttributes: new { @class = btn btn-orange turbolinks style = font-size: 18px @HttpMethodConstraint = Post }) }