To Add the Expand collapse functionality in a .jsp to display and hide the data using <rich:dataTable> JSF component

Requirement: To Add the Expand collapse functionality in a .jsp to display and hide the data using JSF component.

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.

Code I've used in Jsp page:

Here I got all the data dynamically. The only problem is UI arrangement(Displaying it). I've put the S.No, S.Name and S.Address fields in one and course details in another . Both columnGroup are embedded in

Here I am facing a开发者_开发百科 problem while displaying courses for each student(Means expand/collapse or show/hide). Facing problem to include a div or a subTable or something else in dataTable.

Request you to help me in this regard and let me know in case any details required from my end.

Sincerely, Vamshi

Use a <rich:subTable> which you toggle to show/hide with a shot of Javascript and CSS.