I have this page: http://tinyurl.com/5hascg. I'm using JQuery for a few things - :hover on the main content blocks, form validation, and show/hide.
By themselves, everything is working great! But it's the interoperability of the last two that are causing me a headache. When you click anywhere in the "For your home" box, the content appears. There's a form in that <div>. However, when you try to focus in that <div> by clicking, the form hides. So, what I'd like to know is how to show the <div> contents by clicking anywhere in the <div>, but only hide it by clicking on the header (which I've temporarily given a background color of green to make it stand out). For reference, here's the contents of my $(document).ready section which is linked from the page above. Thanks!: $(document).ready(function(){ // Add class to shift background images on load $('#box_home').addClass('pageload'); $('#box_business').addClass('pageload'); $('#box_account').addClass('pageload'); // Show/hide forms $('div#homepage_boxes form').hide(); $('div#homepage_boxes> div.col').click(function() { $ (this).siblings('.selected').andSelf().toggleClass('selected').end().end() //.next('form').slideToggle('fast') //.siblings('form:visible').slideUp('fast'); }); // Add homepage box hover effect for IE6 $('div#homepage_boxes .col').hover(function() { $(this).addClass('ie6boxhover'); }, function() { $(this).removeClass('ie6boxhover'); }); // Form validation $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $("#homeform").validate({ rules: { txtZipcode: { required: true, minlength: 5 } }, messages: { txtZipcode: { required: "To continue processing your request, we need a 5-digit zip code. Please re-type the zip code of your service address.", minlength: "Your zip code must be 5-digits long. Please re- type the zip code of your service address." } } }); });