Accordion form + marking section complete

[fmrock]

Hey everyone,

I am using the accordion content script in a form.

http://www.dynamicdrive.com/dynamici...daccordion.htm

I have this working great with a form that the end user needs to fill out. I have been asked to somehow visually let the end user know that when they fill out the section below that that section is complete.

Here is the code for the form.

<h3 class="AccordionHeader">History</h3>
<div class="AccordionPane">
<textarea name="History" id="History" cols="55" rows="8"><%=varHistory%></textarea>
</div>

<h3 class="AccordionHeader">Review of Systems</h3>
<div class="AccordionPane">
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5" align="left" valign="top">&nbsp;</td>
    <td width="147" align="left" valign="top">
		<input name="ROS_Constitutional" type="checkbox" value="1" <%If varROS_Constitutional=1 Then response.Write(" CHECKED ") End If%> >Constitutional<br>
		<input name="ROS_Eyes" type="checkbox" value="1" <%If varROS_Eyes=1 Then response.Write(" CHECKED ") End If%> >Eyes<br>
		<input name="ROS_ENT" type="checkbox" value="1" <%If varROS_ENT=1 Then response.Write(" CHECKED ") End If%> >ENT<br>
		<input name="ROS_CV" type="checkbox" value="1" <%If varROS_CV=1 Then response.Write(" CHECKED ") End If%> >CV<br>
		<input name="ROS_Respiratory" type="checkbox" value="1" <%If varROS_Respiratory=1 Then response.Write(" CHECKED ") End If%> >Respiratory<br>    
		<input name="ROS_GI" type="checkbox" value="1" <%If varROS_GI=1 Then response.Write(" CHECKED ") End If%> >GI<br>
    </td>    
    <td width="146" align="left" valign="top">
		<input name="ROS_GU" type="checkbox" value="1" <%If varROS_GU=1 Then response.Write(" CHECKED ") End If%>  >GU<br>
		<input name="ROS_MS" type="checkbox" value="1" <%If varROS_MS=1 Then response.Write(" CHECKED ") End If%> >MS<br>
		<input name="ROS_Skin" type="checkbox" value="1" <%If varROS_Skin=1 Then response.Write(" CHECKED ") End If%> >Skin<br>
		<input name="ROS_Neuro" type="checkbox" value="1" <%If varROS_Neuro=1 Then response.Write(" CHECKED ") End If%> >Neuro<br>
		<input name="ROS_Psych" type="checkbox" value="1" <%If varROS_Psych=1 Then response.Write(" CHECKED ") End If%> >Psych<br>    
    </td>
  </tr>
<tr>
    <td width="5" align="left" valign="top">&nbsp;</td>
    <td width="147" align="center" valign="top"><a href="#" onclick="CheckAll()" >Check All</a></td>
    <td width="146" align="center" valign="top"><a href="#" onclick="UncheckAll()" >Uncheck All</a></td>    
</tr>  
</table>
</div>

<h3 class="AccordionHeader">Past Medical History</h3>
<div class="AccordionPane">
<textarea name="Past_Medical_History" id="Past_Medical_History" cols="55" rows="8"><%=varPast_Medical_History%></textarea>
</div>

<h3 class="AccordionHeader">Family History</h3>
<div class="AccordionPane">
<textarea name="Family_History" id="Family_History" cols="55" rows="8"><%=varFamily_History%></textarea>
</div>

<h3 class="AccordionHeader">Social History</h3>
<div class="AccordionPane">
<textarea name="Social_History" id="Social_History" cols="55" rows="8"><%=varSocial_History%></textarea>
</div>

<h3 class="AccordionHeader">Physical Examination</h3>
<div class="AccordionPane">
<textarea name="Physical_Examination" id="Physical_Examination" cols="55" rows="8"><%=varPhysical_Examination%></textarea>
</div>

With ajax is there a way to mark the accordionheader visually (open to ideas) that the textarea box below was filled out. Or the section with check marks has had any of them checked.

 

[fmrock]

any ideas?

 

[jpadie]

are you looking for visual hinting tips? i'd guess the web design forum is better for that.

as a suggestion, if the form validates why not add an opacity layer to it or something similar. darken it or scroll it into the accordion or whatever.