You need to have your event handler handle things differently depending upon the specific child element that was clicked.
For example: $('div#homepage_boxes> div.col').click(function(event) { var $tgt = $(event.target); if ($tgt.not('form')) { //don't toggle when clicking the form! $ (this).siblings('.selected').andSelf().toggleClass('selected').end().end(); } }); See http://www.learningjquery.com/2008/03/working-with-events-part-1 for more complete coverage of this. It's where I learned it. :) ~Pyro On May 22, 3:55 pm, Ridge <[EMAIL PROTECTED]> wrote: > 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." > } > } > }); > > });