---
title: "How to show/hide panel in mvc?"  
description: "How to show/hide panel in mvc?"  
author: "Anonymous User"  
published: 2014-10-11  
updated: 2014-10-11  
canonical: https://www.mindstick.com/forum/2364/how-to-show-hide-panel-in-mvc  
category: "asp.net mvc"  
tags: ["asp.net", "asp.net mvc"]  
reading_time: 2 minutes  

---

# How to show/hide panel in mvc?

I am using [strongly typed](https://www.mindstick.com/forum/298/strongly-typed-view-in-mvc) views in my MVC and have now [managed](https://www.mindstick.com/forum/33928/what-is-managed-or-unmanaged-code-in-c-sharp) to show all the editors for my [register](https://www.mindstick.com/blog/220/registering-client-script-in-asp-dot-net) form as I like.

The [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) is that I have a radio group containing 4 [radio button](https://www.mindstick.com/articles/12743/radio-button-in-android), When selecting a radio button I neet to hide some of the editors that are bound to the strong typed [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) fields.

I could create a [javascript function](https://www.mindstick.com/forum/2090/send-data-from-asp-dot-net-code-behind-to-a-javascript-function) like this.

```
if(radiobonnton1.value = cehcked){           //Hide not used fields           //Show used fields        }        else if(radiobonnton2.value = cehcked){         ...        }        ...
```

The problem with this is that it will be a BIG function and Im not sure how the MVC [Validation](https://www.mindstick.com/articles/12234/validation-using-data-annotation-using-entity-framework) will handle it if a editor that is not valid are hidden? Will it still be possible to submit?\

## Replies

### Reply by Anonymous User

I have now added this [javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) methid :

```
$(document).ready(function () {        $("#ModelViewAd\\.TypeOfAd
:radio").change(function () {              if (this.id.match('TypeOfAd_Sell$') != null) {                 $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');                $("#divBuyNowPrice").fadeIn(500,
null);                 $("#divReservationPrice").fadeOut(500, null);                $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');                 $("#divEndDate").fadeOut(500,
null);                $("#ModelViewAd_EndDate").attr('disabled', 'disabled');                 $("#divStartingPrice").fadeOut(500, null);                $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');             }            else if (this.id.match('TypeOfAd_Buy$')) {                 $("#divReservationPrice").fadeOut(500, null);                $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');                 $("#divEndDate").fadeOut(500,
null);                $("#ModelViewAd_EndDate").attr('disabled', 'disabled');                 $("#divStartingPrice").fadeOut(500, null);                $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');                 $("#divBuyNowPrice").fadeOut(500,
null);                $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');             }            else if (this.id.match('TypeOfAd_Let$')) {                 $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');                $("#divBuyNowPrice").fadeIn(500,
null);                 $("#divReservationPrice").fadeOut(500, null);                $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');                 $("#divEndDate").fadeOut(500,
null);                $("#ModelViewAd_EndDate").attr('disabled', 'disabled');                 $("#divStartingPrice").fadeOut(500, null);                $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');             }            else if (this.id.match('TypeOfAd_WishRent$')) {                 $("#divBuyNowPrice").fadeOut(500,
null);                $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');                 $("#divReservationPrice").fadeOut(500, null);                $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');                 $("#divEndDate").fadeOut(500,
null);                $("#ModelViewAd_EndDate").attr('disabled', 'disabled');                 $("#divStartingPrice").fadeOut(500, null);                $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');             }            else if (this.id.match('TypeOfAd_Swap$')) {                 $("#divBuyNowPrice").fadeOut(500,
null);                $("#ModelViewAd_BuyNowPrice").attr('disabled', 'disabled');                 $("#divReservationPrice").fadeOut(500, null);                $("#ModelViewAd_ReservationPrice").attr('disabled', 'disabled');                 $("#divEndDate").fadeOut(500,
null);                $("#ModelViewAd_EndDate").attr('disabled', 'disabled');                 $("#divStartingPrice").fadeOut(500, null);                $("#ModelViewAd_StartingPrice").attr('disabled', 'disabled');             }            else if (this.id.match('TypeOfAd_Auktion$')) {                 $("#ModelViewAd_BuyNowPrice").removeAttr('disabled');                $("#divBuyNowPrice").fadeIn(500,
null);                 $("#ModelViewAd_ReservationPrice").removeAttr('disabled');                $("#divReservationPrice").fadeIn(500, null);                 $("#ModelViewAd_EndDate").removeAttr('disabled');                $("#divEndDate").fadeIn(500,
null);                 $("#ModelViewAd_StartingPrice").removeAttr('disabled');                $("#divStartingPrice").fadeIn(500, null);            }        })    });
```

The radiobutton is set correcly on validation failed from server to client but the javascript is not runned until a radiobutton is changed manually?\


---

Original Source: https://www.mindstick.com/forum/2364/how-to-show-hide-panel-in-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.