Sliding panel in a table

I want to display in my web page couple of show times and the list of movies under it.

The display would be like this -

Show Time 6.30 PM

   Movie 1
   Movie 2
   Movie 3

Show Time 9.30 PM

   Movie 1
   Movie 2
   Movie 3

I want to display it in such a way that when I Click on "Show Time 6.30 PM" it would display the movies under that show and wont display anything under "Show Time 9.30 PM". Now when I click on "Show Time 9.30 PM", all the contents inside "Show Time 6.30 PM" should shrink and the list of movies should be available in "Show Time 9.30 PM".

I need some idea on how to do this, will it be achieved using a sliding panel, or is there any other control. Note - For the 开发者_如何学JAVAshow times and movie details I have a collection which I am binding it to a repaeter control.

What I am looking is for a SINGLE sliding panel which floats around every row in the table, So if Row 1 is clicked the panel displays the show times under it, when Row 2 is clicked, the data inside row 1 Is shrinked and the panel floats to down displaying the movies under Row 2.

Please shed some info on this. Thanks.

Regards

Vinay

---

I've done similar effects with the Accordion control from the Ajax Control Toolkit.

Take a look and see if that will fit the bill.

http://www.ajaxcontroltoolkit.net/Accordion/Accordion.aspx

An alternative with more of a menu-like effect is the popup control.

http://www.ajaxcontroltoolkit.net/PopupControl/PopupControl.aspx

---

What do you think about using the jQuery UI Accordion? It's fast and easy to implement, and will do everything you need.