How to dynamically hide and show panels in a repeater

[xren]

Hi,

I have a repeater. I would like to insert a panel after each row of the repeater. Then when the item in a row is clicked, the panel appears with some content based on the clicked row.

Can this be done?

Thanks,
Xiaoli

[Jon]

Xiaoli,

The answer depends on whether the click on the row is handled on the server or on the client.

Click handled on Server
---------------------------
If it's handled on the server e.g. your row contains a clickable button or hyperlink or image, then it's very easy - you configure your panel as hidden, then attach a script to the control that is being clicked with code something like:

Code: Select all

controls.MYPANEL.show();

The system automatically sorts out which panel in the repeater the user is working on.

Click handled on client
--------------------------
If the click is handled on the client, then you can choose to do this a number of ways. To keep all the action on the client (which gives the smoothest user experience), you could configure the panel as initially hidden (using CSS display:none), then use the click jquery event to toggle the panel visibility. This is quite similar to jquery expand/collapse tutorial in the Ebase Xi documentation.

Here's an example:

Say we have a repeater like this:

REPEATER1
-> REPEATERROW1
-> -> PANEL1 <-- This is the row's header panel, user will click here
-> -> PANEL2 <-- This is the row's detail panel, hidden initially, then displayed when the header is clicked

Using Html Element Properties (Ctrl H), add class "rowContainer" to REPEATERROW1, class "headerPanel" to PANEL1 and class "detailPanel" to PANEL2.

On PANEL1 add a jquery click event with this code:

Code: Select all

var content = $(this).closest(".rowContainer").find(".detailPanel");
content.slideToggle();

That does the toggling of the detail panel's visibility as the user clicks the header panel. Now you want to configure the detail panels to be initially hidden: on the styling assistant (Ctrl T) for PANEL2, select Advanced Properties and set the CSS property display:none.

An improvement to this would be to show the hand cursor as the user moves the mouse over the header panel. To do this, add a mouseenter event to PANEL1:

Code: Select all

$(this).css("cursor","pointer");

and a mouseleave event:

Code: Select all

$(this).css("cursor","auto");

Regards
Jon

[Dave]

Have a look also at http://forum.ebasetech.com/forum/viewtopic.php?t=317 for more stuff on conditional processing within repeaters.