[jQuery] Toggle and Nested Divs

[[EMAIL PROTECTED]]

Hi all.

I have an outer div that contains several child divs (event search
form that lets the user pick dates, categories, etc...). The user can
toggle the outer div and the child divs as well. This all works for me
AS LONG AS the outer div is visible and not able to be toggled. When I
let the user toggle the outer div, when the outer div is toggled to
visible and the user tries to toggle a child div, the child div opens
and then closes again right away.

I believe this is happening because the child div is somehow
inheriting the parent's visibility. I debugged it and
showHideExactDates() is being run twice. So, it seems like it is
starting out as visible, even though it is not visible on the form.

Here is a snippet of the code:

<p><a href="javascript:void(0)" id="searchFormShowHideLink_image"><img
src="$content.getURI("images/icon_plus.gif")"
name="searchFormShowHideIcon" id="searchFormShowHideIcon" border="0"
align="left" alt="+" /></a> <strong><a href="javascript:void(0)"
id="searchFormShowHideLink_text">Search Form</a></strong></p>

<div id="eventSearchFormDiv">
  <p><a href="javascript:void(0)" id="dateExactShowHideLink_image"
title="show/hide exact date form fields"><img
src="$content.getURI("images/icon_plus.gif")"
name="dateExactShowHideIcon" id="dateExactShowHideIcon" border="0"
align="left" alt="+" /></a> <a href="javascript:void(0)"
id="dateExactShowHideLink_text">Specify Exact Dates</a></p>
        <div id="dateExactDiv" style="display: none;">
            Occurs between <input type="text" size="3"
name="dateRangeStartMonth" id="dateRangeStartMonth" title="date range
start month" value="$!dateRangeStartMonth" maxlength="2">/
            <input type="text" size="3" name="dateRangeStartDay"
id="dateRangeStartDay" title="date range start day" value="$!
dateRangeStartDay" maxlength="2">/
            <input type="text" size="5" name="dateRangeStartYear"
id="dateRangeStartYear" title="date range start year" value="$!
dateRangeStartYear" maxlength="4"><a href="javascript:void(0)"
id="dateRangeStartCalendarLink" title="event range start calendar date
picker"><img src="$content.getURI("images/icon_calendar.gif")"
alt="Choose range start date" border="0" align="absmiddle"></a>&nbsp;
                and <input type="text" size="3" name="dateRangeEndMonth"
id="dateRangeEndMonth" title="date range end month" value="$!
dateRangeEndMonth" maxlength="2">/
                <input type="text" size="3" name="dateRangeEndDay"
id="dateRangeEndDay" title="date range end day" value="$!
dateRangeEndDay" maxlength="2">/
                <input type="text" size="5" name="dateRangeEndYear"
id="dateRangeEndYear" title="date range end year" value="$!
dateRangeEndYear" maxlength="4"><a href="javascript:void(0)"
id="dateRangeEndCalendarLink" title="event range end calendar date
picker"><img src="$content.getURI("images/icon_calendar.gif")"
alt="Choose range end date" border="0" align="absmiddle"></a>
        </div>
</div>

function showHideSearchForm() {
        jq("#eventSearchFormDiv").toggle("blind", {}, 1000);
    }

    //add the form submit handler
    jq(document).ready(function() {
        jq("#searchFormShowHideLink_image").click(showHideSearchForm);
        jq("#searchFormShowHideLink_text").click(showHideSearchForm);
    });

function showHideExactDates() {
        alert("running showHideExactDates()");
        jq("#dateExactDiv").toggle("blind", {}, 1000);
    }

    //add the form submit handler
    jq(document).ready(function() {
        jq("#dateExactShowHideLink_image").click(showHideExactDates);
        jq("#dateExactShowHideLink_text").click(showHideExactDates);
        jq("#dateRangeStartCalendarLink").datepicker();
        jq("#dateRangeEndCalendarLink").datepicker();
    });

Help please! I have been banging my head on this now for several
hours!

Thanks.