Ravendra's Blog

December 3, 2009

JQuery to show/Hide elements dynamically

Filed under: Uncategorized — Ravendra Mishra @ 4:31 pm

<script>
 /*

 Text Boxes html
 <tr>
  <td width=”190px” valign=”top”>
   <h3>
    <nobr>Key or Licence Number
     <span>*</span>
    </nobr>
   </h3>
  </td>
  <td width=”400px” valign=”top”>
   <span dir=”none”>
   <input maxlength=”255″ title=”Key or Licence Number” /><br>
   </span>Provide UKHO licence
   number or ADP Key number where
   applicable.
  </td>
 </tr>
 Option/Radio Button html
 <tr>
  <td>
   <span title=”Digital Chart Services – AVCS”>
    <input value=”ctl00″ checked=”checked” />
    <label for=”ctl00_ctl19_g_e7b38077_2b92_4881_b667_83ee40defade_ff7_1_ctl00_ctl00″>Digital Chart Services – AVCS</label>
   </span>
  </td>
 </tr>

 */

 _spBodyOnLoadFunctionNames.push(“configureFields”);

 function slideShow(fieldName) {
  var selector = “nobr:contains(‘” + fieldName + “‘)”;
  //$(selector).parent().parent().parent().slideDown(‘slow’);
  $(selector).parent().parent().parent().show();
 }
 
 function slideHide(fieldName) {
  var selector = “nobr:contains(‘” + fieldName + “‘)”;
  //$(selector).parent().parent().parent().slideUp(‘slow’);
  $(selector).parent().parent().parent().hide();
 }
 
 function showGeneral()
 {
  // Hide these fields
  slideHide(‘Key or Licence Number’);
  slideHide(‘Product Name or Number’);
  slideHide(‘Current Base discs installed’);
  slideHide(‘Expiry Date’);
  slideHide(‘Permit Number’);
  slideHide(‘Edition Date’);
  slideHide(‘Current Weekly Update Held’);
 }
 
 function showDigital()
 {
  // Show these fields
  slideShow(‘Key or Licence Number’);
  slideShow(‘Product Name or Number’);
  slideShow(‘Current Base discs installed’);
  slideShow(‘Expiry Date’);
  // Hide these fields
  slideHide(‘Permit Number’);
  slideHide(‘Edition Date’);
  slideHide(‘Current Weekly Update Held’);
 }

 function showPaper()
 {
  // Hide these fields
  slideHide(‘Key or Licence Number’);
  slideHide(‘Product Name or Number’);
  slideHide(‘Current Base discs installed’);
  slideHide(‘Expiry Date’);
  // Show these fields
  slideShow(‘Permit Number’);
  slideShow(‘Edition Date’);
  slideShow(‘Current Weekly Update Held’);
 }
 
 function configureFields() {
  showGeneral();
  $(“span[title^=’General’]”).children(“input”).focus( function () { showGeneral() } );
  $(“span[title^=’Digital Chart Services’]”).children(“input”).focus( function () { showDigital() } );
  $(“span[title^=’Paper Products & Publications’]”).children(“input”).focus( function () { showPaper() } );
 }
</script>

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

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

Blog at WordPress.com.

%d bloggers like this: