{"type":"doc","content":[{"type":"panel","attrs":{"panelType":"error"},"content":[{"type":"paragraph","content":[{"text":"This page has not yet been rewritten to reflect recent restructuring.","type":"text"}]}]},{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"class":{"value":"component-api-page"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"paragraph","content":[{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"top"},"legacyAnchorId":{"value":"SlidingPanel-top"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Anchor"}}}}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"BLOCK

The Sliding Panel subcomponent is used by to show and hide the UI Options controls at the top of a page. The options described on this page can be configured through the options of the main Fat Panel UI Options component.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"excerpt","parameters":{"macroParams":{"atlassian-macro-output-type":{"value":"BLOCK"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Excerpt"}}},"content":[{"type":"paragraph","content":[{"text":"The Sliding Panel subcomponent is used by ","type":"text"},{"text":"User Interface Options API","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/docs/pages/7079499"}}]},{"text":" to show and hide the UI Options controls at the top of a page. The options described on this page can be configured through the options of the main Fat Panel UI Options component.","type":"text"}]}]}],"version":1}}}},{"type":"paragraph","content":[{"text":"Do not use this component directly.","type":"text","marks":[{"type":"strong"}]},{"text":" The information on this page should be use when customizing Fat Panel UI Options.","type":"text"}]},{"type":"paragraph","content":[{"text":"See Also","type":"text","marks":[{"type":"strong"}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"How To Configure The UI Options Sliding Panel","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/pages/createpage.action?spaceKey=docs&title=How%20To%20Configure%20The%20UI%20Options%20Sliding%20Panel&linkCreation=true&fromPageId=7079609"}}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"User Interface Options API","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/docs/pages/7079499"}}]},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"Tutorial - User Interface Options","type":"text","marks":[{"type":"link","attrs":{"href":"https://fluidproject.atlassian.net/wiki/spaces/docs/pages/7079498"}}]}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A div macro in a rich body macro can't be created or edited in the new editor.","cxhtml":"summary-table

	Fires after the sliding panel has closed. Fires after the sliding panel has opened. Fires before the sliding panel closes. Fires before the sliding panel opens.
	Hides the sliding panel. Shows the sliding panel.
	A boolean indicating whether the panel should be hidden on initialization. `listeners` See for information. `selectors` See below. An array of strings that will be displayed onscreen.
	The container for the sliding panel. The button used to trigger showing/hiding the panel.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"div","parameters":{"macroParams":{"class":{"value":"summary-table"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Div"}}},"content":[{"type":"table","attrs":{"layout":"align-start"},"content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#Supported Events","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-SupportedEvents"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#afterPanelHide","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-afterPanelHide"}}]},{"type":"hardBreak"},{"text":" Fires after the sliding panel has closed.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#afterPanelShow","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-afterPanelShow"}}]},{"type":"hardBreak"},{"text":" Fires after the sliding panel has opened.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#onPanelHide","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-onPanelHide"}}]},{"type":"hardBreak"},{"text":" Fires before the sliding panel closes.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#onPanelShow","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-onPanelShow"}}]},{"type":"hardBreak"},{"text":" Fires before the sliding panel opens.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#Methods","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-Methods"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#hidePanel()","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-hidePanel()"}}]},{"type":"hardBreak"},{"text":" Hides the sliding panel.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#showPanel()","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-showPanel()"}}]},{"type":"hardBreak"},{"text":" Shows the sliding panel.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#Options","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-Options"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#hideByDefault","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-hideByDefault"}}]},{"type":"hardBreak"},{"text":" A boolean indicating whether the panel should be hidden on initialization.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"listeners","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" See ","type":"text"},{"text":"#Supported Events","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-SupportedEvents"}}]},{"text":" for information.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"selectors","type":"text","marks":[{"type":"code"}]},{"type":"hardBreak"},{"text":" See below.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#strings","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-strings"}}]},{"type":"hardBreak"},{"text":" An array of strings that will be displayed onscreen.","type":"text"}]}]}]},{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#Selectors","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-Selectors"}},{"type":"strong"}]}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1},"content":[{"type":"paragraph","content":[{"text":"#panel","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-panel"}}]},{"type":"hardBreak"},{"text":" The container for the sliding panel.","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"type":"hardBreak"},{"text":" ","type":"text"},{"text":"#toggleButton","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-toggleButton"}}]},{"type":"hardBreak"},{"text":" The button used to trigger showing/hiding the panel.","type":"text"}]}]}]}]}]}],"version":1}}}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Supported Events","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"cxhtml":"back-to-topINLINE

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"span","parameters":{"macroParams":{"class":{"value":"back-to-top"},"atlassian-macro-output-type":{"value":"INLINE"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Span (Deprecated)"}}},"content":[{"type":"paragraph","content":[{"text":"back to top","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-top"}}]}]}]}],"version":1}}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"_supported events intro"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Include Page"}}}},{"type":"heading","attrs":{"level":3},"content":[{"text":"afterPanelHide","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A div macro in a rich body macro can't be created or edited in the new editor.","cxhtml":"api-table

Description	This event fires after the sliding panel has been hidden.
Type	default
Parameters	none
Availability	Infusion 1.4 and later
See also

Description	This event fires after the sliding panel has been shown.
Type	default
Parameters	none
Availability	Infusion 1.4 and later
See also

Description	This event fires immediately before the sliding panel is hidden. Note that this is not a preventable event.
Type	default
Parameters	that The Sliding Panel component object.
Availability	Infusion 1.4 and later
See also

Description	This event fires immediately before the sliding panel is shown. Note that this is not a preventable event.
Type	default
Parameters	that The Sliding Panel component object.
Availability	Infusion 1.4 and later
See also

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"span","parameters":{"macroParams":{"class":{"value":"back-to-top"},"atlassian-macro-output-type":{"value":"INLINE"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Span (Deprecated)"}}},"content":[{"type":"paragraph","content":[{"text":"back to top","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-top"}}]}]}]}],"version":1}}}},{"type":"heading","attrs":{"level":3},"content":[{"text":"hidePanel()","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A div macro in a rich body macro can't be created or edited in the new editor.","cxhtml":"api-table

Description	This method causes the sliding panel to close, hiding the contents.
Parameters	none
Availability	Infusion 1.4 and later
See also

Description	This method causes the sliding panel to open, revealing the contents.
Parameters	none
Availability	Infusion 1.4 and later
See also

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"span","parameters":{"macroParams":{"class":{"value":"back-to-top"},"atlassian-macro-output-type":{"value":"INLINE"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Span (Deprecated)"}}},"content":[{"type":"paragraph","content":[{"text":"back to top","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-top"}}]}]}]}],"version":1}}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"_options intro"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Include Page"}}}},{"type":"heading","attrs":{"level":3},"content":[{"text":"hideByDefault","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A div macro in a rich body macro can't be created or edited in the new editor.","cxhtml":"api-table

Description	A boolean indicating whether the panel should be hidden on initialization.
Default	true
Example	javascript
See also

Description	See below.

Description	An array of strings that will be displayed on the screen. These include the text displayed on the toggle button.
Default	javascript
Example	javascript
Notes	The `showText` text will be used to label the button while the panel is hidden. The `hideText` text will be used to label the button while the panel is open.

","nestedContent":{"type":"doc","content":[{"type":"bodiedExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"span","parameters":{"macroParams":{"class":{"value":"back-to-top"},"atlassian-macro-output-type":{"value":"INLINE"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Span (Deprecated)"}}},"content":[{"type":"paragraph","content":[{"text":"back to top","type":"text","marks":[{"type":"link","attrs":{"href":"#SlidingPanel-top"}}]}]}]}],"version":1}}}},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"include","parameters":{"macroParams":{"":{"value":"_selectors intro"}},"macroMetadata":{"schemaVersion":{"value":"1"},"title":"Include Page"}}}},{"type":"heading","attrs":{"level":3},"content":[{"text":"panel","type":"text"}]},{"type":"extension","attrs":{"extensionType":"com.atlassian.confluence.migration","extensionKey":"legacy-content","text":"","parameters":{"reason":"A div macro in a rich body macro can't be created or edited in the new editor.","cxhtml":"api-table

Description	The container for the sliding panel
Default	".flc-slidingPanel-panel"
Example	javascript

Description	The button used to trigger showing/hiding the panel.
Default	".flc-slidingPanel-toggleButton"
Example	javascript

This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

Sliding Panel