I'm about to implement something a bit like the expand-all | collapse-all on this page (hopefully less tacky!):
BUT, I'm still very green, so I was hoping some folks here can lend a fair bit of their experience & time?
I also have a copy of the main relevant files I'm working on, but it's all a bit private. So I hope you don't mind, but to those happy to help, I can share them via a pwd-protected OneDrive link?
That screenshot doesn't show it yet, but I have already done a fair bit of the CSS side of things (using ARIA).
To further flesh out what I'm thinking, I also have a bunch of pseudo-code:
Each of the collapsible tables should have a class, I’d need to;
1 - Create a button in dashboard.ejs that calls a function. This function should:
2 - Use a global Boolean declared at the start of Dashboard.js to indicate if the tabs should >be open or closed
3- Get an array of all of the elements with the above class
4 - For each element, check if it is currently open or closed, and simulate a click on the >element if I need to change it to match the Boolean
5 - Change the appearance of the button to indicate what clicking on it should do
(so, if clicking on it would expand everything, something like “EXPAND”, or “COLLAPSE” for >the opposite)
Some further pseudo-code…
1- Button/s for Expand/Collapse all tables
2 - two-dimension array for storing if table is open or closed (e.g [table-name, >true/false]).
3 - Update array if individual table is opened or closed
4 - Refresh table array on location refresh
Does this sound about right, missing steps or sub-steps? And what 'actual' code [CSS/HTML/js] must I use to implement it?