You're actually correct, Wizzud...
In experimenting with opening and closing a details section
I started with trying to manipulate table rows, but the animation
would stutter and jerk.
I finally got totally smooth animation by using separate tables
for each row. Looks exactly the same as a table with multiple rows,
but works better with the animation.
I've posted the entire block of HTML below, if you want to view it.
Where would I put your line of code in my current jquery code? Or
would it be a separate function? (It's at the bottom of the HTML...)
Rick
Here's the HTML: (Some of it is ColdFusion...)
<div class="calendar">
<table cellpadding="0" cellspacing="0" border="0" style="width:
532px;">
<tr style="width: 532px;">
<td id="day" class="cal_heading">Day</td>
<td id="date" class="cal_heading">Date</td>
<td id="time" class="cal_heading">Time</td>
<td id="event"
class="cal_heading">Event</td>
<td id="update"
class="cal_heading">Update</td>
<td id="delete"
class="cal_heading">Delete</td>
</tr>
</table>
<cfparam name="current_date" default="">
<cfquery name="get_dates" datasource="#dsn#">
select distinct event_date from calendar order by event_date
</cfquery>
<cfloop query="get_dates">
<cfset current_date = '#dateformat(get_dates.event_date,
'yyyy-mm-dd')#'>
<cfquery name="get_events" datasource="#dsn#">
select * from calendar where event_date =
'#dateformat(get_dates.event_date, 'yyyy-mm-dd')#'
order by event_date, event_time
</cfquery>
<cfloop query="get_events">
<cfoutput>
<table class="clickme" cellpadding="0"
cellspacing="0" border="0" width="532">
<tr style="cursor: hand; background:
##eee;">
<cfif get_events.currentrow eq 1>
<td
id="calcellday">#dateformat(get_events.event_date, "ddd")#</td>
<cfelse>
<td
id="calcellday"> </td>
</cfif>
<cfif get_events.currentrow eq 1>
<td
id="calcelldate">#dateformat(get_events.event_date, "mmm d, yyyy")#</td>
<cfelse>
<td
id="calcelldate"> </td>
</cfif>
<td
id="calcelltime">#timeformat(get_events.event_time, "h:mm tt")#</td>
<td
id="calcellevent">#get_events.event_name#</td>
<td id="calcellupdate"><a
href="calendar_update.cfm event_id=#get_events.event_id#">Update</a></td>
<td id="calcelldelete"><a
href="calendar_delete.cfm?event_id=#get_events.event_id#">Delete</a></td>
</tr>
</table>
<cfsavecontent variable="str">
#get_events.event_description#
</cfsavecontent>
<cfscript>
function noBreak(str)
{
blockArr = arrayNew(1);
while (reFindNoCase("<.*?", str) and reFindNoCase("<.*?", str))
{
startPos = reFindNoCase("<.*?", str);
endPos = reFindNoCase("<*.?>", str);
thisBlock = Mid(str, startPos, endPos - startPos+2);
str = removeChars(str, startPos, endPos - startPos+2);
ArrayAppend(blockArr, thisBlock);
str = Insert("[!*#ArrayLen(blockArr)#*!]", str, startPos -
1);
}
str = replace(str, ' ', ' ', 'all');
for (i=1; i lte ArrayLen(blockArr); i=i+1)
{
str = replacenocase(str, '[!*#i#*!]', blockArr[i]);
}
return str;
}
</cfscript>
<div class="details" style="border-bottom: 1px solid
##aaa;">
<table cellpadding="0" cellspacing="0" border="0"
width="532">
<tr>
<td id="name"
class="cal_show_head">Event</td>
<td id="data_name"
class="cal_show_data">#get_events.event_name#</td>
</tr>
<tr>
<td id="date" class="cal_show_head">Event
Date</td>
<td id="data_date"
class="cal_show_data">#dateformat(get_events.event_date, "mmm d,
yyyy")#</td> </tr>
<tr>
<td id="time" class="cal_show_head">Event
Time</td>
<td id="data_time"
class="cal_show_data">#timeformat(get_events.event_time, "h:mm tt")#</td>
</tr>
<tr>
<td id="location"
class="cal_show_head">Event Location</td>
<td id="data_location"
class="cal_show_data">#get_events.event_location#</td>
</tr>
<tr>
<td id="details" class="cal_show_head">Event
Details</td>
<td id="data_details"
class="cal_show_data">#replace(noBreak(str), "#Chr(13)#", "<br />",
"All")#</td>
</tr>
<tr>
<td id="contact_person"
class="cal_show_head">Contact Person</td>
<td id="data_contact_person"
class="cal_show_data">#get_events.contact_person#</td>
</tr>
<tr>
<td id="contact_email"
class="cal_show_head">Contact Email</td>
<td id="data_contact_email"
class="cal_show_data"><a
href="mailto:#get_events.contact_email#";>#get_events.contact_email#</a></td>
</tr>
<tr>
<td id="contact_phone"
class="cal_show_head">Contact Phone</td>
<td id="data_contact_phone"
class="cal_show_data">#get_events.contact_phone#</td>
</tr>
<tr>
<td id="entered_by"
class="cal_show_head">Entered By</td>
<td id="data_entered_by"
class="cal_show_data">#get_events.entered_by#</td>
</tr>
</table>
</div> <!--- details --->
</cfoutput>
<cfset current_date =
#dateformat(get_dates.event_date, 'yyyy-mm-dd')#>
</cfloop>
<cfif get_dates.currentrow lt get_dates.recordcount>
<table cellpadding="0" cellspacing="0"
border="0" style="width: 532px; background-color:#ddd;">
<tr>
<td style="border-left: 1px
solid #aaa; border-right: 1px solid #aaa;"> </td>
<tr>
</table>
</cfif>
</cfloop>
</div> <!--- calendar --->
> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
> Behalf Of Wizzud
> Sent: Friday, October 19, 2007 7:00 PM
> To: jQuery (English)
> Subject: [jQuery] Re: How would I modify this to...
>
>
> The code you have seems to imply that you're opening/closing tables,
> not rows.
> Some html would help, otherwise one has to guess as to the structure.
>
> Possibility ...
> $(this).siblings(':visible:not(.clickable)').slideUp();
>
> On Oct 19, 7:16 pm, "Rick Faircloth" <[EMAIL PROTECTED]> wrote:
> > .close an open row, when another row is clicked to open?
> > It's working great to open rows when they are clicked, but now
> > I'd like to close the open row upon opening another.
> >
> > Rick
> >
> > $(document).ready(function() {
> >
> >
> $('div.calendar').find('div.details').hide().end().find('table.clickme'
> ).cli
> > ck(function() {
> > var answer = $(this).next();
> > if (answer.is(':visible')) {
> > answer.slideUp();
> > } else {
> > answer.slideDown();
> > }
> > });
> >
> > });
