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); });