Collapse/Expand PanelSplitter in ADF

This post shows how to collapse/expand the PanelSplitter layout in ADF using JavaScript.

The PanelSplitter can be closed from any command action may be a commandlink / commandMenuLink / commandButton / commandImageLink

Follow the below steps to do the same:

1. Add the following JavaScript below the af:document tag in your .jspx page
< af: resource type="javascript">

function toggleSplitter(evt) {

comp = evt.getSource().findComponent('pt_ps1');

if (comp) {

comp.setProperty("collapsed", !comp.getProperty("collapsed"));
} else {

alert('not found');

} }

< / af:resource>

function name can be anything and findComponent(), searches the PanelSplitter component through ID, check for the relative or absolute path of PanelSplitter.

In order to invoke this JavaScript from the Command Component, set the component's clientComponent property to true and add inside the command component.

with type as click and method name as toggleSplitter

< af: commandImageLink id="i1" clientComponent="true"
text="commandImageLink 1">
< af: clientListener method="toggleSplitter" type="click" / >
< / af:commandImageLink >