ASP.MVC – JQuery – Hide/Show elements using class

Not specifically ASP.MVC related, but I used JQuery because of it so I’m grouping it in anyway.

Created for a screen which needed to hide/show controls based on a radio button list selection, something which I’ve done before but the simplicity of how to implement it with JQuery impressed me so I’m blogging it.

It uses two bits of standard JQuery functionality, selecting elements based on class and applying css styles to the selection of elements.

  • Decorate the elements to hide/show with css classes which will control when they are displayed, table rows in this example:

Capture

  • Then create a Javascript function which will use the JQuery class selector to find those elements and set the css to hide/show, this function will be called when the document is loaded to setup the page based on the selected radio button value.

Capture

Simple! Doing it using plain JS would have been much longer and harder to maintain (changing the elements to display just requires modifying the classes).

 

Advertisements

One thought on “ASP.MVC – JQuery – Hide/Show elements using class

  1. I was also using the "actHide" class to mark elements which should be hidden by default (when action was not set) but that could be done with an additional filter. Thanks, didn’t know about the hide/show func’s and the filters look much more efficient than my multiple selects.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s