DEV Community

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

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

SaulH on November 17, 2020

Hi folks, I'm about to implement something a bit like the expand-all | collapse-all on this page (hopefully less tacky!): http://www.dynamicdri...
Read full post
Collapse
 
saulhj profile image
SaulH • • Edited

@madsstoumann
I'm trying to use aria-controls of CSS, even that is not quite working yet (will show a vid), but more importantly, is getting the js tied into it.
Alt Text

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
madsstoumann profile image
Mads Stoumann • • Edited

No, aria-expanded is just nformation, it doesn't do anything on it's own.
Check out the markup in my Codepen, the <details>-tag has the collapse/expand functionality built-in. And then you need a single button with a JS-method, that toggles the [open]-state (like the example in my comment).

Collapse
 
saulhj profile image
SaulH •

Seems I could also go this way? ...
getbootstrap.com/docs/4.5/componen...

And this one's mostly the same, cept with more of an MD aesthetic:
mdbootstrap.com/docs/jquery/javasc...
mdbootstrap.com/snippets/jquery/te...

Collapse
 
saulhj profile image
SaulH •

@madsstoumann I don't see anything there, that enables me to do what I'm trying to do? O_o

TY/BR.

Thread Thread
 
madsstoumann profile image
Mads Stoumann •

Then I might have misunderstood you?
I've made a new, small Codepen-example with a "Toggle All"-button:

codepen.io/stoumann/full/gOMJqyg

Thread Thread
 
saulhj profile image
SaulH • • Edited

I think that's it, very close to what I was inching towards, thanks!

Hmm, could be tricky to readapt for my web app project (not all my work), a rats nest of different toolsets/frameworks etc, you name it.
But I will give it a shot...

The thing is though...

Our page has all of the headers collapsed when it first loads, will it know this, & thus, ensure the toggle button appear as "expand all"?
And then, however many times one toggles "expand all"/"collapse all", will it maintain knowledge of the 'state' - of all the table headers?
Within the current sesh of course; if the page is reloaded, presumably it'll go back to them all being collapsed, & wipe the state record.

Upon testing...
Your Codepen-example suggests it will satisfy all of the above^, BUT, it could be different when trying to merge into the entire project.

Collapse
 
madsstoumann profile image
Mads Stoumann • • Edited

HTML's built-in "toggler" is the <details>-tag - I have a demo with various styles here:

codepen.io/stoumann/pen/ExydEYL

This tag has a boolean attribute called "open":

<details class="your-class" open>
Enter fullscreen mode Exit fullscreen mode

To select all open elements, use:

document.querySelectorAll('.your-class[open]');
Enter fullscreen mode Exit fullscreen mode

To select all closed elements, use:

document.querySelectorAll('.your-class:not([open])');
Enter fullscreen mode Exit fullscreen mode

So, as an example, to set all open elements to closed:

const open = document.querySelectorAll('.your-class[open]');
open.forEach(elm => { elm.open = false; });
Enter fullscreen mode Exit fullscreen mode

/Mads