UI Collapse

Hi,

a!sectionLayout(
label: "Click to Expand/Collapse",
contents: {
a!richTextDisplayField(
value: "Here are the details you can hide or show."
)
},
isCollapsible: true, /* This enables the section to be collapsible */
isInitiallyCollapsed: true /* This sets the default state as collapsed */
)

i want collapse on the right and not upwards., how can we do that.

a!localVariables(
local!showSidePanel: false,
a!sectionLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!textField(
label: "Main Content Area",
value: "This is the main area of the interface.",
readOnly: true
)
}
),
a!columnLayout(
contents: {
a!textField(
label: "Collapsible Side Panel",
value: "Details shown here can be hidden.",
readOnly: true,
showWhen: local!showSidePanel
)
}
)
}
),
a!buttonLayout(
primaryButtons: a!buttonWidget(
label: if(local!showSidePanel, "Hide Details", "Show Details"),
style: "SOLID",
size: "SMALL",
saveInto: {
a!save(local!showSidePanel, not(local!showSidePanel))
}
)
)
}
)
)

a!localVariables(
local!showSidePanel: false,
a!sectionLayout(
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!textField(
label: "Main Content Area",
value: "This is the main area of the interface.",
readOnly: true
)
}
),
a!columnLayout(
contents: {
a!textField(
label: "Collapsible Side Panel",
value: "Details shown here can be hidden.",
readOnly: true,
showWhen: local!showSidePanel
)
}
)
}
),
a!buttonLayout(
primaryButtons: a!buttonWidget(
label: if(local!showSidePanel, "Hide Details", "Show Details"),
style: "SOLID",
size: "SMALL",
saveInto: {
a!save(local!showSidePanel, not(local!showSidePanel))
}
)
)
}
)
)