I have a gridview that displays customer information. One of the fields is a comments field that can store multiple lines of characters. I would like it to display just in one line but when someone clicks on the comments field animate it out with a box effect that can be closed or collapsed back. Any suggestions? Here is my gridview;
div class="bottomBar">
<strong>My submited Referrals:</strong>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server"
DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetDataCustomerEntries"
TypeName="customer_entryTableAdapters.customer_entryTableAdapter"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_cus_id" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="bd_id" Type="Int32" />
<asp:Parameter Name="first_name" Type="String" />
<asp:Parameter Name="last_name" Type="String" />
<asp:Parameter Name="cell_phone" Type="String" />
<asp:Parameter Name="other_phone" Type="String" />
<asp:Parameter Name="status" Type="String" />
<asp:Parameter Name="paid" Type="String" />
<asp:Parameter Name="date_submited" Type="DateTime" />
<asp:Parameter Name="notes" Type="String" />
<asp:Parameter Name="email" Type="String" />
<asp:Parameter Name="location" Type="String" />
<asp:Parameter Name="appointment_date" Type="String" />
<asp:Parameter Name="Original_cus_id" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="bd_id" Type="Int32" />
<asp:Parameter Name="first_name" Type="String" />
<asp:Parameter Name="last_name" Type="String" />
<asp:Parameter Name="cell_phone" Type="String" />
<asp:Parameter Name="other_phone" Type="String" />
<asp:Parameter Name="status" Type="String" />
<asp:Parameter Name="paid" Type="String" />
<asp:Parameter Name="date_submited" Type="DateTime" />
<asp:Parameter Name="notes" Type="String" />
<asp:Parameter Name="email" Type="String" />
<asp:Parameter Name="location" Type="String" />
<asp:Parameter Name="appointment_date" Type="String" />
</InsertParameters>
</asp:ObjectDataSource>
<asp:GridView ID="GridView1"
runat="server"
AllowPaging="True"
AllowSorting="True"
DataKeyNames="cus_id"
DataSourceID="ObjectDataSource2"
CellPadding="4" ForeColor="#333333"
CssClass="gridview"
PageSize="5"
AutoGenerateColumns="False"
Font-Size="Medium" >
<PagerSettings FirstPageText="First" LastPageText="Last"
Mode="NumericFirstLast" />
<RowStyle BackColor="#EFF3FB" />
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:TemplateField HeaderText="Date Submited"
SortExpression="appointment_date">
<ItemTemplate><%#Eval("date_submited", "{0:M/dd/yyyy}")%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="first_name" HeaderText="First Name">
<ItemTemplate><%#Eval("first_name")%></ItemTemplate>
<EditItemTemplate><asp:Label id="first_name" Font-Bold=true runat="server" Text='<%# Eval("first_name") %>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="last_name" HeaderText="Last Name">
<ItemTemplate><%#Eval("last_name")%></ItemTemplate>
<EditItemTemplate><asp:Label id="last_name" Font-Bold=true runat="server" Text='<%# Eval("last_name") %>' />
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="cell_phone" HeaderText="Cell#"
SortExpression="cell_phone" />
<asp:TemplateField SortExpression="email" HeaderText="Email">
<ItemTemplate><%#Eval("email")%></ItemTemplate>
<EditItemTemplate><asp:TextBox id="email" runat="server" Columns="20" Text='<%# Bind("email") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="status" HeaderText="Status"
SortExpression="status" ReadOnly=true />
<asp:BoundField DataField="paid" HeaderText="Paid"
SortExpression="paid" ReadOnly=true />
<asp:TemplateField HeaderText="Appointment Date"
SortExpression="appointment_date">
<ItemTemplate><%#Eval("appointment_date", "{0:M/dd/yyyy}")%>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" id="textbox1" Text='<%# Bind("appointment_date") %>'></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="textbox1" PopupButtonID="textbox1"></cc1:CalendarExtender>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="notes" HeaderStyle-Width="15px" HeaderText="Notes"
SortExpression="Notes" >
<HeaderStyle Width="15px"></HeaderStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#507CD1" Font-Bold="True" ForeColor="#333333"
Wrap="False" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#99CCFF" Wrap="True" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>