Confluence: Buttons to toggle expander controls

While writing a simple page in Confluence, I used expander controls to help manage real estate. To help users, I added two buttons (expand all, collapse all) to enhance the user experience.

After a little experimentation, I deceided to use the OOTB icons as the trigger for the logic. A simple piece of JavaScript to check for the "chevron right" class in the anchor controls, and process the logic accordingly.

Here is the script (to be placed in an HTML control on the page)

<script language="JavaScript">
function expandUI(isClosed)
{ var a = document.getElementsByClassName("expand-control");
  var b = document.getElementsByClassName("expand-icon")
for (let i = 0; i < a.length; i++){
if (b[i].classList.contains("aui-iconfont-chevron-right") == isClosed)
{
a[i].click();
}
}
}
// make sure the page loads with the expanders expanded
window.addEventListener("load", function(){ expandUI(true); });
</script>
<input id="custombtn" type="button" value="Expand All" onClick="expandUI(true);">
<input id="custombtn2" type="button" value="Collapse All"  onClick="expandUI(false);">

Comments

Popular posts from this blog

SharePoint 2013: Error updating managed account credentials

Error deploying Nintex workflow: An item with the same key has already been added