Thanks Ricardo. I have put the code up at http://jsbin.com/atiza
As for the double quotes on the Velocity call, those are evaluated on the server prior to being sent to the client, so no worries there. I appreciate the help with this! It seems like this should be a very easy thing to do (I did the exact same thing with Prototype/ Scriptaculous on another site). I am not sure what I am missing. On Nov 5, 7:27 am, ricardobeat <[EMAIL PROTECTED]> wrote: > Try providing a test page or pasting your code > atwww.pastie.orgorwww.jsbin.com, that way people can actually read it! :) > > Can't figure out from this code what might be wrong, it's probably an > event bubbling issue. > > And you have src="$content.getURI("images/icon_plus.gif")" that will > cause serious parsing errors on the browser, use single quotes inside. > > - ricardo > > On Nov 4, 7:43 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote: > > > 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.