DEV Community: SaulH

Urgent help needed :(

SaulH — Mon, 23 Nov 2020 06:53:07 +0000

Hi folks, relative newb,

I've been trying to finalise this for ages, but still quite lost, & fast running out of time:

https://dev.to/saulhj/toggle-at-top-of-the-page-to-expand-collapse-all-headers-elegant-solution-2jac

It's muddied by the fact that all of the promising solutions out there; while great in a sandbox;

Are tricky for a newb like me to work out how to readapt & integrate-nicely, into our "preexisting" project!

Please, can I get some help ASAP!? :(
@madsstoumann

More detail & background in that prior post.
And newest progress updates will continue here.

Thank you very much.

Toggle at top of the page, to expand/collapse all headers -elegant solution?

SaulH — Tue, 17 Nov 2020 14:29:09 +0000

Hi folks,

I'm about to implement something a bit like the expand-all | collapse-all on this page (hopefully less tacky!):

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm

BUT, I'm still very green, so I was hoping some folks here can lend a fair bit of their experience & time?

Screenshot of the project as implemented thus far is attached...

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?

Toggle at top of the page, to expand/collapse all headers -elegant solution?

SaulH — Thu, 05 Nov 2020 03:18:55 +0000

Hi folks,

I'm about to implement something a bit like the expand-all | collapse-all on this page (hopefully less tacky):

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm

BUT, I'm still very green, so was hoping some folks can lend a fair bit of their experience & time?

Screenshot of the project as implemented this far is attached...

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, may I please share via a pwd-protected OneDrive link?

To further flesh out what I was thinking, & just to get the ball rolling. I also have a bunch of pseudo-code which I'll include in the DM, to continue discussing there -as/if needed.