Question: AccordionPanel expand and collapse behavior

[haritos30]

Hello

I would like to have all my Accordion tabs expanded when the page opens. I would also like to have buttons that trigger the collapse all and expand all behaviors. I imagine I have to use the ExpandBehavior.java and CollapseBehavior.java files but I have no idea how to make them work. I tried the following but it doesn't work:

 accordion = new AccordionPanel("accordion", tabs); 
 accordion.setMarkupId("myAccordion");
 this.add(new ExpandBehavior("myAccordion"));
 form.add(accordion);

I get a javascript error: Uncaught TypeError: Cannot read property 'expand' of undefined. Also I don't know how to trigger the expand/collapse functionality via buttons.

Can you please provide some guidance? Thank you in advance

[sebfz1]

I'll try to have a look tomorrow. Please do not use GitHub's issues for questions. Please use the dedicated forum. Thanks.

[haritos30]

You are right about using github issues. Can you give me a link to the forum plz?

[haritos30]

you mean this one? https://groups.google.com/g/wicket-jquery-ui

[sebfz1]

Yes

you mean this one? https://groups.google.com/g/wicket-jquery-ui

[sebfz1]

I initially wrote ExpandBehavior and CollapseBehavior for my own usage so I guess I didn't doc/test everything...
The correct usage with the "selector" ctor is:

    String selector = String.format("#%s > ul", accordion.getMarkupId());
    this.add(new ExpandBehavior(selector));

It seems there is actually a slight issue with the "component" ctor.
I will fix it so you later will be able to use it like this (but it has to be in onConfigure):

    this.add(new ExpandBehavior(accordion));

[haritos30]

Any chance you can patch v7 as well?

[sebfz1]

It is already patched in wicket-7.x branch. I will release soon (I still need to decide what I will do with the previous issue)

[haritos30]

ok thank you

[haritos30]

Hello again. I got it working when the page loads using the onConfigure based on your instructions. However I don't understand how to trigger this behavior dynamically (when the user presses a button).

Simply adding (again) this behavior when the user presses a button does not work. Any help on how to achieve this?

[sebfz1]

Not sure exactly what you mean by "does not work"... You can try one of this ways:

Refreshing the component itself

@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
    accordion.add(new ExpandBehavior(accordion));
    target.add(accordion);  
}

Refreshing the hosting component (the form for instance)

@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
    form.add(new ExpandBehavior(accordion));
    target.add(form);           
}

Only injecting/executing the jQuery statement (my favorite)

@Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form)
{
    ExpandBehavior behavior = new ExpandBehavior(accordion);
    target.appendJavaScript(behavior.$());
}

[haritos30]

Ok it worked. I was doing it wrong. Thank you very much for your prompt help.