present data in collasible and expandible format.

[thomas davis]

I can use HTML,DHTML,JAVASCRIPT AND JSP. I will not be able to use any other technology.

First step:
I have to display NAME first with an arrow image or mark along side,NAME should be pulled from datasource.
second step:
when click on the above arrrow mark,it should call server to get more data associated with the NAME.
third step:
when we again click on arrow,it should collapse and show only name.

NAME : John>

click on arrow
NAME: John
Address: 23/34 fost avenue
state : LA
COUNTRY :USA

again click on arrow
NAME : John>



Can anybody help me to to do it?
I want to make it as a common and reusable one so that i can use everywhere..

OR

To Add the Expand collapse functionality in a .jsp to display and hide the data


Details:

Here I'm able to get the data from webservices to jsp. While displaying the data there is a provision to show and hide some of its data

Example:

If Suppose there are 3 rows(Student data) coming from database, Say each row as Student for instance. and Each student is associated with some courses(Say course1, course2 and course3).

Appearance should look like this:

Table1:

Details S.No S.Name S.Address
--------------------------------
+ 10 Alex Texas
+ 20 John Dallas
+ 30 Nick Newyork

Now if we click on + button associated with first record, it should exapand and show the first record details and - button to be displayed as shown below.

Table2:

Details S.No S.Name S.Address
--------------------------------
- 10 Alex Texas

course1 : Java
cpurse2 : j2ee

- 20 John Dallas

course1: .Net
course2: php

+ 30 Nick Newyork


And when when we click on - button it should hide the data and should display the above data as Table1.


Here I got all the data dynamically. The only problem is UI arrangement(Displaying it).

[Jeanne Boyarsky]

Can you use jQuery? Take a look at the "my profile" page here for an example.

[thomas davis]

Jeanne Boyarsky wrote:Can you use jQuery? Take a look at the "my profile" page here for an example.

how do I do that ? Do you have any example? I need to get data ,when user clicks on the link and expand it with data. And more importantly,the screen should not reloaded. Thanks, I appreciate your insights.. cana you please tell me how do I go to your profile?

[Bear Bibeault]

Please reserve bold for emphasis -- not for your entire post. I have removed it.

The jQuery UI Accordion widget is described and demoed here.

"My Profile" is a link near the top of the page.

[Bear Bibeault]

P.S. If an accordion is not what you are looking for because the data is hierarchical (like a file system), you can alos find many jQuery tree plugins.