View Full Version : [JQuery] - Show/hide causing issue

May 22nd, 2008, 03:39 PM
Hi folks,

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:


// Add class to shift background images on load

// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes> div.col').click(function() {

// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
}, function() {

// Form validation
submitHandler: function() { alert("submitted!"); }

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."

I'm hoping this is a viable option, but it's beyond my limited JQuery expertise.

Thanks in advance!