DEV Community

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

 
saulhj profile image
SaulH

@madsstoumann

3 main files [.js, .scss, & .ejs] to give a better picture of the site -as currently implemented:
1drv.ms/u/s!AgX5ZmkXXVySlGRig44rsd...

And some screenshots & a video...
1drv.ms/u/s!AgX5ZmkXXVySlGZ53YwLwO...

Both are password protected, I'll message it to you or anyone who's happy to help.

Currently, there's code that keeps a count of opened table headers, & once a 4th one's opened;
It collapses the first of the 3 before the fourth. This functionality is now not wanted.
So I'd need to remove the current code, or readapt it...

All that's wanted now is a button near the top of the page, that toggles "expand-all/collapse-all".
One that fits in nicely with the current web app's aesthetic...

Thread Thread
 
saulhj profile image
SaulH

That's annoying, there used to be a way to message, but cant seem to do so for you now. Have a record of another person have msg'd previously, must've been switched off. Do you have Twitter?

Thread Thread
 
saulhj profile image
SaulH

@madsstoumann

Totally lost, tried to implement what you suggested, can't get it to work, tried several other approaches. :(

Thread Thread
 
saulhj profile image
SaulH

@madsstoumann ? Thanks again.

Thread Thread
 
madsstoumann profile image
Mads Stoumann • Edited

Hi again,
Sorry for the late reply, busy with work.
The reason why I suggested the <details>-tag is because the <details>-tag has the open-state. You should look into how to control that from your app. Probably something like: <details {{open}}>, where {{open}} will come from your state-object. Good luck!
/Mads