Jump to content

How to do this, but also incorporate a universal toggle at top of page, to expand or collapse all headers?


Recommended Posts

https://www.w3schools.com/howto/howto_js_collapsible.asp

Total noob, have some ideas, but still a bit unsure on the best approach.
Was going to implement something similar to what's here (also see supplementary page)
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

thank-you!

Screenshot 2020-11-05 140927.jpg

Link to post
Share on other sites

Best to show some relevant code and go from there. 

Link to post
Share on other sites

Don't have code, best got at this point, is pseudocode...

To further flesh out what was thinking, does this sound about right?
Missing steps or sub-steps? How to further flesh out each step/sub-step?

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)
Edited by SamJ
Link to post
Share on other sites

Create a HTML doc with a <div>, put something in it and post your code.  That's most of us got started.

Link to post
Share on other sites
  • 2 weeks later...

Most of the main files are attached, & some further updates/commentary here:
https://dev.to/saulhj/toggle-at-top-of-the-page-to-expand-collapse-all-headers-elegant-solution-2jac
Essentially, only worked on the dashboard.ejs file - thus far.
But eventually need to do some stuff in dashboard.js, & possibly style.css.
Help, is greatly appreciated....

Thanks again.

Screenshot 2020-11-05 140927.jpg

dashboard.ejs dashboard.js style.scss

Link to post
Share on other sites

Further developments (ongoing/WIP) in the discussion thread here...
https://dev.to/saulhj/toggle-at-top-of-the-page-to-expand-collapse-all-headers-elegant-solution-2jac
Sorry, not going to post same stuff in multiple spots at once, hope folks here aren't pedantic about this sort of thing.
Can always continue our own separate help discussion here, after you've seen what's going on there.

Thanks again.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...