Expand/Collapse Edit View for Details

I have an HTML table rendered by a Repeater control on a UserList page. It
displays a list of Users, and to the right of each user, a delete and an
edit image button. I have JavaScript that executes on the page load, that
binds event handlers to the onblur event of each cell in each table row. The
event handler posts an Ajax request to the server, so any updates the user
makes are almost instantly persisted to the DB.



Only selected, frequently used, User fields are displayed in the table for
the 'in-place' editing described above. To edit other fields, the user
clicks the Edit button at the right of a User row, and another, UserDetails
page opens in a pop-up, which the user closes by clicking Cancel or Save
after any editing of the User details.



I now need to modify the UserList page so that when the user clicks the Edit
icon, a User Details edit area becomes visible still on the UserList page,
i.e. an invisible/collapsed area for user details expands/becomes visible
when Edit is clicked, then collapses/becomes invisible again when Save or
Cancel is clicked.



How could I best achieve this?


===================================
This list is hosted by DevelopMentor®  http://www.develop.com

View archives and manage your subscription(s) at http://discuss.develop.com