Hide column in list depending on another columns value

While working on a SharePoint 2010 project a client wanted to have some columns in a list to only display depending on the value entered in another field. The obvious choice for this was InfoPath but dues to project decisions this was not an option.

With InfoPath not being an option I decided the next best option would be to use JQuery. After some looking around I found a similar article, however this didn’t seem to work for SharePoint 2010 so I have altered it original and included it below. 

Not only have i changed it to work in 2010 I have also modified it so you can pass in an additional parameter to the function which determines if the column should be displayed on the page load and if the column should be hidden or displayed on the click event.

I have not touched on how you include this JavaScript function and call it as there are several different ways of achieving this depending on your circumstances.

Function
  1. function HideColumn(targetColumn, hideColumn, hideInitially) {
  2.     var columnToHide = $("h3:contains('" + hideColumn +"')");
  3.     var columnToAttachClick = $("h3:contains('"+ targetColumn +"')");
  4.     var inputToAttachClick = columnToAttachClick.closest('td').next('td').find('input');
  5.  
  6.     if (hideInitially == 'true') {
  7.         columnToHide.closest("tr").hide();
  8.     }
  9.  
  10.     if (inputToAttachClick.is(':checked')) {
  11.         if (hideInitially == 'true') {
  12.             columnToHide.closest("tr").show();
  13.         }
  14.         else {
  15.             columnToHide.closest("tr").hide();
  16.         }
  17.     }
  18.     else {
  19.         if (hideInitially == 'true') {
  20.             columnToHide.closest("tr").hide();
  21.         }
  22.         else {
  23.             columnToHide.closest("tr").show();
  24.         }
  25.     }
  26.  
  27.     inputToAttachClick.bind('click', function () {
  28.         if ($(this).is(':checked')) {
  29.             if (hideInitially == 'true') {
  30.                 columnToHide.closest("tr").show();
  31.             }
  32.             else {
  33.                 columnToHide.closest("tr").hide();
  34.             }
  35.         }
  36.         else {
  37.             if (hideInitially == 'true') {
  38.                 columnToHide.closest("tr").hide();
  39.             }
  40.             else {
  41.                 columnToHide.closest("tr").show();
  42.             }
  43.         }
  44.     });     
  45.    }

Displayed on load then hidden
  1. HideColumn('Target column name','Column to hide', 'false');

 

Hidden on load then displayed
  1. HideColumn('Target column name','Column to hide', 'true');

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: