Programmatically expand accordion tab

[buzud]

I use a side panel and inside I have an accordion.
Now I want before to open side panel , to set accordion tab collapsed = true/false

what I did: .SidePanelJQMSidePanelOptionsBeforeOpen
SideAccordion.ActiveTab := SideTabFilter;
SideTabFilter.JQMAccordionOptions.Collapsed := false;
SideTabQuikEdit.JQMAccordionOptions.Collapsed := True;

where Accordion = SideAccordion and tabs are SideTabFilter and SideTabQuikEdit

then when side panel is open i expect to have the accordion expanded on selected tab
If I run ajaxrerender, all goes wrong.

What I missing here ?
Thanks!

properties for sidepanel and accordion
SidePanel.JQMSidePanelOptions.Position := jqmsppRight;
SidePanel.JQMSidePanelOptions.PositionFixed := true;
SidePanel.JQMSidePanelOptions.Display := jqmspdOverlay;
SidePanel.JQMSidePanelOptions.Theme := 'b';
SidePanel.JQMSidePanelOptions.Animate := true;
SidePanel.JQMSidePanelOptions.SwipeClose := true;

{side accordion}
SideAccordion.GroupTabs:= True;

[buzud]

I try different aproach: onbutton click script

On region content render:

Code: Select all

BtnExpandFirst.JQMButtonOptions.Events.OnVClick.Script :=
     $("#btnFirst").click(function() {
        $("#myAccordion").children("#myTab1").trigger( "expand" );
    });
where
  MyAccordion.Css := 'myAccordion';
  MyAccordionFirstTab.Css := 'myTab1';
  BtnExpandFirst.css := 'btnFirst';


I try this code on an web editor with JQuery 1.3.1 and is working ok. When I add to delphi, not, page is loading and loading....
What can be the problem, outside is ok, in delphi not ?! Can be the version of Jquesry mobile from 1.3.1 to 1.3.2 used by CGDevtools?

[Jorge Sousa]

Hello

Have you tried with

Accordion.JQAccordionOptions.MultiToggleTab

https://www.cgdevtools.com/docs/_html/index.htm?IWCGJQAccordion.TIWCGJQAccordionOptions.MultiToggleTab.htm

or

Accordion.JQAccordionOptions.MultiToggleTabs

https://www.cgdevtools.com/docs/_html/index.htm?IWCGJQAccordion.TIWCGJQAccordionOptions.MultiToggleTabs.htm

About your script code, there is nothing to do with the (ancient) jquery version, Intraweb is currently using jquery version 1.8.2.

Your code is wrong

The jQuery selectors started with # determine an element id and you want to use a class, so you should had change to
.btnFirst and .Accordion

since you are doing this:

MyAccordion.Css := 'myAccordion';
BtnExpandFirst.css := 'btnFirst';

if you want to use the ids with the symbol #

you better use our script macro <# ControlName #>

$(<#BtnExpandFirst#>)
and
$(<#MyAccordion#>)

and you don't need to set the classes.

[buzud]

Thank you for response.

I am not very familiar with javascript...but seems I need to learn very fast to can use this components.
You did a great work, but is a little difficult for me at the beginning.

Second, the Accordion.JQAccordionOptions.MultiToggleTab is not available for mobile accordion. At list I did not find it.
SideAccordion: TIWCGJQMAccordion;
I found doc as: https://www.cgdevtools.com/docs/_html/index.htm?IWCGJQMAccordion.TIWCGJQMAccordion.htm

I use finally something like:
SideAccordion.ActiveTab := tab1;
SideAccordion.AjaxReRender(false,true);

and seems is working with mobile accordion.

Best regards,
Dan

[Jorge Sousa]

Hello

Oops, my bad, i didn't notice you were referring mobile accordion, sorry.

Code: Select all

SideAccordion.ActiveTab := tab1;
SideAccordion.AjaxReRender(false,true);

This is the right way to do what you need, I'm glad you found it by your own