Ajax Accordion with multiple columns

Hi!

I was wondering if there is a way to make accordion display panes in more than one column, e.g. <Row1><column1><Pane1/></column1><column2><Pane2/></column2></Row1>

Can't you just use two Accordions next to each other using <table> or <div>, e.g.:

<div>
<div style="width:50%"><accordion /></div>
<div style="width:50%"><accordion /></div>
</div>

-Damien

That solution does not allow to have only one accordion pane open at a time, as one accordion does not know about the state of the other

That's correct, one doesn't know about the other; however, you could write your own javascript to handle that.

-Damien

Thanks for the advice But unfortunately i don't know javascript Is there a way to do this without writing javascript?Or maybe you could give me a link which describes how to do this via javascript?

I can't think of a way to accomplish what you want without JavaScript.

I would recommend that you look at the code for the Accodion in the AccordionBehavior.js file (the code can bedownloaded from CodePlex), although without knowing JavaScript, you're going to have a difficult time with it.

I found another Accordion that my help you, seehttp://www.stickmanlabs.com/accordion/; take a look at the "A Horizontal Accordion! (Nested)" section.

-Damien

Thanks for the advice Maybe someone else had such problem and could give a suggestion?

I've found a solution, it's quite easy actually. Hope it helps someone.

First of all, you should create an event handler for the accordion's selected index changed event

function Handler()

{

var Accordion2Behavior = $get("Accordion1UniqueId").AccordionBehavior;

Accordion2Behavior.set_SelectedIndex(-1);

}

The code given above searches for the Accordion2 and closes it by setting the selected index to -1.

function ToggleOpen()

{

var Accordion1Behavior = $get("Accordion1UniqueId").AccordionBehavior;

Accordion1Behavior.add_selectedIndexChanged(Handler);

}

Next we have added our event handler to the selectedindexchanged event of the Accordion1. Now if you select something on the Accordion1, Accordion2 is guaranteed to be closed. Behave similarly to add such behaviour to Accordion2.

How is the ToggleOpen() function called? Is it somehow wired up to the accordion?