JQuery UI accordion on repeater

[Steve James]

Hi, I'm struggling to get an accordion to work on a repeater.

JQuery is treating each record in pairs, ie
row 1 = title
row 2 = content
row 3 = title
row 4 = content
row 5 = title
row 6 = content

Any suggestions / samples of this working?

thanks

[Jon]

I don't have any examples of using an accordion with a repeater, the general feeling is that it is difficult because of the jquery implementation.

The server admin application has a few examples of dynamically opening/closing panels within a repeater, but it uses jquery slideToggle() instead. Here are extracts from the code:

Each repeater row contains a header panel and a content panel like this.

Repeater
--RepeaterRow (with class "openableContent")
----Panel (Header panel with class "logsHeader")
------Header content
----Panel (Content panel with class "openableDetail")
------Row content

The header panel has a jquery click event:
togglePanelVisibility($(this), ".openablecontent", ".openabledetail");

Here's the togglePanelVisibility function:

Code: Select all

function togglePanelVisibility(headerElement, parentClass, contentClass)
{
	var content = headerElement.closest(parentClass).find(contentClass);
	content.slideToggle();
}

For info, the header panel also has mouseenter and mouseleave events to set the cursor:

mouseenter: $(this).css("cursor","pointer");
mouseleave: $(this).css("cursor","auto");

If you want to use an accordion, other suggestions would be to use a Custom Layout or an HTML Control so you have more control of the generated HTML.

[Steve James]

Thanks Jon, I'll have a look at slideToggle as that look just the ticket.

Steve