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