Seeing as I was Yahoo! web developer for a year, you’d think I’d be “eating dog food” by pimping the YUI JavaScript library. Don’t get me wrong - it is a very powerful and comprehensive framework and definitely worth experimenting with at some point.

Unfortunately though, I had already been playing around with jQuery prior to my employment there so I was already sold on the minimalist, simple approach to jQuery, hence why it is my personal favourite.

Recently, I’ve been building quite a comprehensive web application at Premium Choice which relies heavily on JavaScript. There are many dependencies within the form whereby certain fields should only be shown when other options are selected.

The form adopts a step-by-step accordion wizard interface to simplify the process, therefore certain screens are hidden throughout the process. I was having issues trying to hide already hidden fields when changing options elsewhere. jQuery must be making the assumption that it is already hidden so you don’t need to hide it. However, I wanted to preserve that hidden state when the containing screen was eventually shown.

To get around this, you need to control the actual CSS rather than relying on the pre-defined jQuery $.show() and $.hide() functions, like so:

 if($(this).val()=='something') {
  // show the relating hidden field.
  $('#target_field').css('display', 'block');
} else {
  // hide the relating hidden field.
  $('#target_field').css('display', 'none');
}

It is very unlikely that this situation arises but, on the rare occasion when you encounter it, at least now you’ll know a way around it.