Website accordions: the good the bad and the ugly

[00:00:05] Nathan Wrigley: Hello there and welcome to the No Script Show.

This is the first in our series looking at various components that make up a website. Today we're gonna be talking about accordions. The format for this series is that we'll first talk about the components in terms of when they may be helpful in the light of UX or not, but also we'll be looking at them in terms of accessibility and SEO considerations.

We'll also talk about the code needed. But as this goes out as an audio podcast, we'll also follow this episode up with a part two. This will be video content that looks at some code snippets and working examples. And as always, the person actually doing the real work is David Waumsley. Hello David.

[00:00:48] David Waumsley: Hello.

Yeah, so hopefully this format will work. And I had this idea a long time ago, and I built this sort of site for my own use called the Intrinsic Framework. It's a bit of a joke name, I can't think what else to call it. Where I was collecting all these snippets I got from other people and, things that I might use.

And when we did our show builds, we did three of these builds. Basically, I used the same pile of snippets. So I thought what we'll do is we'll try and brand, that, that whole thing. To match with this so we can talk about stuff and then we can actually show some of these snippets as well that anyone can use if they wanna take away and use them or tell me where I've got things wrong.

That would be helpful too. So

[00:01:30] Nathan Wrigley: we're gonna have two websites in effect. We're gonna have one with the content, like the stuff we talk about, the podcast, the videos, that kind of thing. But then also there'll be a, a. Different layer, the intrinsic framework layer where you can go and see how these examples work and find the code and things like that.

[00:01:48] David Waumsley: Exactly. So we, I mean we're, all putting it on the no script show. So we've got, we, did it anyway. I did some solo videos, didn't I? Which we characterized as learn. There were short videos where we talked about code or I talked about code then on my own, but now I'm gonna do it with you 'cause it's a lot more entertaining when I.

yeah, so we can actually bring up the show notes 'cause we have got some notes to talk around. Here we are. Okay. Yeah.

[00:02:16] Nathan Wrigley: So this is gonna be available at no script show slash 20 if you want to get in touch with us. And today it's all accordions all the way down.

[00:02:25] David Waumsley: Yeah. The good, bad, and ugly. That's why I don't, it's a bit more like click bait, isn't it?

That it is. yeah. So we've got notes. So first of all, I guess we ought to start with defining what an accordion is. So I've got a couple of. Definitions, if you like, which I've seen from various places. One is that it's a collection of hide and show disclosure widgets, which is generally a sort of W three C kind of term for these things, disclosure widgets, and then other people.

I think people like the Nielsen Norman Group. Or is it Norman Nielsen Group? I always forget. Anyway, yes, the UX people, I think they would refer to it as a collection of headings with icons that when triggered would reveal a panel of previously hidden content and. I've put a little note on this one actually, because I looked through a few articles preparing for this and talking about, design of our accord, accordions.

And, a lot of those when I went to the example sites, and it could be that the example sites had changed, but they weren't actually what we would think as accordions where something drops down below. They were sometimes overlays, they were sometimes, just anchor text, go into somewhere else on the page.

so for, this, we're really thinking of accordions as those, know, drop down. Kind of things, little disclosure, which is,

[00:03:54] Nathan Wrigley: yeah. can I tell you what I would've said prior to reading your show notes here? I would've just said, yeah, basically it's a bunch of horizontal titles. Really? Yeah. And you click on it and then something.

Peers, usually with some kind of transition, like a slide out or something like that. And you've got this option to open and close. Sometimes you open multiple, close multiple, have one open at a time, those kind of things. But I guess it comes from the instrument, doesn't it? That you know the accordion, like a piano with a squeeze box in between the idea that it gets bigger and gets smaller.

Yeah, it, but it goes sideways word, isn't it? Yeah, definitely go sideways as opposed to up and down, but I'm imagining that's where it comes from anyway. But, always to do with JavaScript. There's always an element of JavaScript in there because things have been hidden and they need to be revealed in some way.

that's, and that's,

[00:04:44] David Waumsley: and that's why we're talking about Yeah. Because we can now do it with HTML and CSS and have it accessible, but, nice. But, next thing I've got here is obviously the types of accordion that we have. 'cause they do have names. I didn't know this. So an exclusive accordion is when, I think this is typical expected behavior of accordion that when you open one with a trigger or the heading a panel, the other ones will close.

So you only keep one open at a time. So they work as a group, but there is the non-exclusive. accordion where you can open as many as you like. and then we have the kind of inclusive or non-inclusive where there is an open and close or toggle where you can just open them all up or close them all up if you want, which is quite handy.

it's curious,

[00:05:34] Nathan Wrigley: ju just thinking about it, it's curious that this is something that's become a normal design pattern. Because I'm imagining when the browsers first started implementing things in HDML, that probably this wasn't even on anybody's radar. And then some, yeah. Some ingenious person thought, gosh, there's too much here.

Is there any way of making it less, getting rid of half of the content that we've got, but somehow discoverable by the user. Yeah. And and now it's just a completely normal, accepted part of. I'd imagine if you go to many websites, a significant proportion of them will have something akin to this somewhere, maybe as an FFAQ or something like that.

But, anyway, carry on.

[00:06:15] David Waumsley: Yeah. just thinking back to the, websites that you did for clients before, do you, did you use an accordion a lot?

[00:06:22] Nathan Wrigley: quite often actually. And usually it was on the things like the FAQ kind of page where the whole point was that you wanted to put a ton of information on there, but you also wanted to make it so that the headings were the thing, not the actual content, and then the person could discover it.

But I always implemented it with a kind of drag and drop page builder style solution. I don't think I ever built one. Outside of A CMS. So I didn't explore how the HTML was structured and the importance of that. It was always just a, drop in a widget or an, a block or whatever you, might do in the WordPress space, and then fill out the, available containers.

you'd have the title and then the, actual content. That was it. But there's way more to this, and obviously now that it's being done with just CSS, you've gotta know what those bits are.

[00:07:15] David Waumsley: Yeah. And I, same for me. Really? I don't think I used an accordion until I started using the page builder and then I overused them.

Now looking back, I can see I, it was there because you thought, oh, FAQ page. Yep. Of course I need an accordion. Here's one I can drag in. Yep. And it, yeah. Anyway, we'll, move on to that. Sorry I interrupted myself. No, that's okay. The code needed. Yes, that's what we're moving on. So this is the interesting thing really, is that.

Really until recently, we always needed JavaScript and if we wanted them to be accessible, we would need to add Aria tags as well to those so screen readers can understand what's happening. But from January, 2020, we got the details and summary element that allowed us to make non-exclusive accordions effectively only with html.

we don't even need the CSS, the browsers own, style sheets. We'll do what we want, That was great. From September last year, 2024, we could add matching name attributes to the details element that would allow them to work as one so we could create exclusive. So one would close as the other one would open as long as those names matched against it.

So that was a big move forward. And in terms of styling, we're not quite there yet, but just recently, and it's still limited at the moment we have, I always pause when I want to say this interpolate size, which is something which just come to CSS and what it does. is, I dunno if I can explain it well, but it, in that, the case of us, it allows us to be able to use CSS to size something that isn't seen that's hidden.

So when something is closed, if you like, you've got nowhere of being able to do a transition to an open stage. And this will allow this to happen. Now, to be honest, we will get onto that when we get onto the CSS. It's a bit of code that you probably want to put in all your star sheets and your resets because they would've just introduced this ability to do it, but it would impact on other CSS.

So you have to add it in if you want this functionality, but it's one of these things that you probably likely to always want, so you would just stick it in your resets. but anyway, it does allow now for us to have a bit of animation when we open those tabs because. As it is. So suddenly we've got something which is like the JavaScript.

Accordions that we've always known. There've always been a little bit of animation there.

[00:09:47] Nathan Wrigley: Can I just re just reprise that just to make sure I've understood that. So prior to January, 2021, you needed JavaScript if you wanted to achieve anything akin to a, a ahy show state. Yes. Yes. So an accordion January, 2020, we got, details and summary, which allowed us to have a single element.

So you could do multiple single elements, but they weren't in any way connected with one another. You would just have a detail and then the summary, and you click on the detail and the summary is open, but there's no animation. It just suddenly open, suddenly closed. Then in last year, that's surprising to me, September, 2024, you could now somehow bind them together.

So you could have multiple details, multiple summaries, and they would bind together so that you would open one and another would know that was open. So maybe another one should collapse. So all of a sudden. September, 2024, we've got something which starts to feel a little bit more like the JavaScript accordions where they're interacting with one another.

And then finally, right now, interpolate, he said trying to get the word right size, is new. Maybe it's not widely accepted, but the idea there is it, can figure out that there's this zero sized thing Yes. And then expand it. And now we've got the full range of things. It now feels like an entirely Java script.

Less accordion is available. Yeah.

[00:11:11] David Waumsley: There was no way to, to have the height goes from zero to, an auto size, which you would need to contain all of that stuff before this. And it's still not supported. it's only really on Therom browsers at the moment, but it will come to the rest. So I think we can.

Guarantee that we'll be able to do this. Okay. There, there were, other ways, which I'll talk about later on that one. So let's, should we move on to Yeah. Why we might wanna use them? Sure. I'll bring up the article that I was looking at, which is from the, now it doesn't tell me whether it's Norman Nien, but the NNN group.

Anyway, that's all helpful, isn't it? Yes. and there's some great examples on here. actually I'll go. I'm distracting myself. I'll go back to, what we said were the main benefits. Can we just quickly go over this one? okay. What they list, and there's a few articles and I've put links to them on the show notes here, but there's, the benefits is really improve scanability so there's less cut out on the page so that you've mentioned there.

Reduce. Scrolling, if you need to get to specific content so you can get there much quicker, and that it can make the content easier, particularly on mobiles when say you've got long articles and you want different sections or the thing we were looking at earlier where we thought is useful, where there might be a step by step process that you go through, say with a form where you complete this bit and you want to open the next bit to complete the next bit, so there's not this big overwhelm.

Yep. The downsides which we've got here, which will always depend on the use and implementation with this, is that there, there is for the user an increased interaction cost, so they have to keep clicking on stuff. there's fragmented access to information, so they can't compare. The content in, if they're gonna close, if it's exclusive.

Yep. they can't compare what's in that, information. So that can get annoying. And then there's all the other difficulties that are there. most accordions out there when you look at them, don't function properly. but there are issues with being able to print out the content that's in an accordion, accessibility issues, which will.

Touch on data, and sometimes with SEO, with the, content is hidden and not easy to find, or not easy to find with an in-page search.

[00:13:29] Nathan Wrigley: Yeah. okay. So that would be a scenario where a, an accordion was collapsed. The dom shows that a certain string of words through search is somewhere on the page, but where the heck is it?

How do you, How do you locate it? Would you have to open that in order to click through the search to find it? Yeah. That's tricky.

[00:13:47] David Waumsley: Yeah. Yeah, I'll bring up that article and apologies for those people listening to the audio only, but there's not much to see here. So there are a couple of quick examples, which I thought were, I'll just scroll down.

These that they put in their article and I. The best use I, I think of is they show an example of the Logitech page where it's a typical product page where you've got the main product on the left and on the right you've got that thing where you'll add to cart and some basic details. But also there's a little dropdown of a, accordions there, where you can.

Just get other information about the spec and details, compatibility, support and all that kind of stuff. But not everybody will want that to go to checkout. And if you were to put that in, that would be a lot of text. You wouldn't see the item you're going to buy. So I see this as a really good use.

[00:14:36] Nathan Wrigley: Yeah. It's interesting because on some checkout pages, you see the sort of the sister of accordions, which is tabs. So that's a horizontal layout. Yes. a similar idea. But this works much better in a sidebar, doesn't it? You couldn't do a taped interface for that content. But, but an accordion here works really well and it's curious.

'cause I just, that example, I would use that, I would definitely be clicking on the specs and details. Yes. But I don't wanna see the compatibility, the support, the, in the bot. I don't wanna see any of that. So having it collapsed and me seeing the option to go into the tech spec, that's exactly the way that I would like to see it.

And it's all just in the sidebar is perfect.

[00:15:19] David Waumsley: And it solves that problem. And they say there's about sort of 10% of people who just need all the details. They can get the type of person who will investigate the footer in, for all the links and everything that, that type of person. And it's a way of bringing that up.

Without, it makes it more available where it needs to be. So I can see the good use for interesting thing is though, on the Logitech, if you do go to that page now, I, imagine it's changed since they did this article, which is only a couple of years ago. But now if you actually go to that and you click on it, it doesn't open up a dropdown.

It actually. It does an overlay that comes in from, the right hand side. Oh, okay. Overall, yeah. yeah. oh, nevermind. Yeah, it's a good idea. Yeah. And the other example that they put here, which is from a site, which is Learn, HTML, where they use it to section up the sort of syllabus content that they might have there.

So you might want to look at different things on the syllabus, and you can go into that. And that on a lot of articles as well, where there might just be. Not everything's gonna be of interest, and you want to. Just not overwhelm. so we have to scan down. So I could see that. So that's, there have got a couple of good uses, but I'm guilty of, I'm gonna scan down here to where I think the one that I'm most guilty of doing is this one here on the Department of Revenue that they show where there's three accordions all closed.

And if you were to open those up as they show. Basically that's just a header and a normal, standard bit of text, which would just be a lot easier to scan through this, wouldn't it?

[00:16:56] Nathan Wrigley: gi given the amount of text there, I suppose a decision has to be made about whether there's any utility in having an accordion.

And one of those thoughts is how much there is. And there's really not a lot. And because there's not a lot, why not just get rid of the, the accordion in the first place? Less interactions. But obviously if each of those were, I don't know, twice, three times the length that it is there. Then it suddenly does become useful because you're avoiding the scroll and all of that.

But yeah, I think in that situation I'm guessing that they're using some kind of CMS and the CMS will probably have a field where they can dump that information and that information will automatically end up in a, an accordion, if Yeah. As opposed to a page by page analysis of should this go on accordion?

Should it not? So maybe it's the CMS, which is making the decision for them there.

[00:17:48] David Waumsley: I've certainly gone to loads and loads of, obviously I think page builder sites where there's frequently asked questions and then literally the answer is just a couple of words. Yeah. Do you offer a refund and you open it up and the word is yes.

Yeah. It's so frustrating to after that interaction cost, yeah. Is, really a lot of the problem. and you take on a lot of issues, responsibilities for. how these things are gonna work to be accessible to all. Okay, let's go back then. So accessibility considerations. yeah, so we, so details and summary makes it a lot easier now for us to be able to create an accessible I.

Accordion, but, we can't just stick a whole bunch of them together and leave it there. We do need to tell screen readers that this is a collection of items, so we do need Aria to be able to let them know that it's grouped, which we'll get onto. when we do the more video bit, but we need to tell 'em how that is grouped as well.

we need to decide whether that content or the content that is going to be included, whether the accordion itself is going to be included in the summary of the page and is content. So for screen readers, they get a summary whether they'll get the headers. So we have to bake that into it. And then we also have to consider should those accordions.

Have their own headers as such. So we would expect when we look at frequently asked questions, a lot of the time that these are actually headers. But if we're using accordion a lot of the time with JavaScript, we would put that in a button. And it loses all its meaning as a header. It can't be a header and a button at the same time.

Yeah, and the same happens if we use summary within details. It's mapped to the button role. So if you, can put a header in it and stylistically, I think it will adopt that, but it loses its meaning as a heading. So there are those sort of considerations. About the type of content that we have for

[00:19:54] Nathan Wrigley: flexibility.

Yeah. There's actually a lot there isn't there? And, becoming from a background of using a CMS and page builders and things like that, obviously you are, maybe they have the options for these kind of things, but probably not. Maybe most people wouldn't explore them. Just the fact that it puts the accordion on the page, you kind of thing.

that job's done. Yes. But there is a lot there. aria are able to say that things are grouped. So if you're using just a single detail, so summary and details, you're, better, that's fine. But when you start to group them together in this way that we were describing earlier, you need to in some way indicate that these are group, they, form part of a wider group.

And then whether or not things don't need to go in the table of contents and, Buttons as headings and headings as buttons is also problematic. yeah.

[00:20:41] David Waumsley: You, you're always gonna need to put it in either a diviv, and you can give it a roll of groups so somebody knows. But ideally you add r we a label buy and then put that to a title, which you may or may not want to hide for sighted users, or if you want it to show up.

In the table of contents, we have to put that then in a section and do a similar thing. So it's quite interesting, all this consideration. So yeah, I doubt there would be a page builder, one-off, accordion that could. Swap to all of those different things. So probably, they're always going to be used wrongly in certain circumstances.

[00:21:17] Nathan Wrigley: Yeah. But, nice to know that given the knowledge, which will impart, there's an answer for each of those problems. The considerations that's the right word. there's a way of doing it correctly. So that's good to know. Okay.

[00:21:31] David Waumsley: Yeah. Design considerations. we talk about that. That there's obviously more design control that you've got if you're going for a JavaScript approach than you can because there's some limitations with details and summary using it as an accordion.

Because as mentioned, we've got this, Animation, but it's still limited at the moment, so that's not gonna work for everybody. We've also got, and this is really interesting, I'll get into it more with the code, but the, we have the marker that we get by default. This little triangle. Yeah. Which changes if we just use H two ML and use the browser zone user agent styles, we get that.

Outta the box. But when you wanna change it, it becomes quite tricky. You could do some global changing of color, in theory on the documentation, at least with web dev. It says that you will be able to replace that like any other marker and use like a bullet point, any of those listed, but it doesn't seem to work.

And there are some still little quirks with that because even if you remove by using content and put those in quotes with nothing in it to remove the marker against the marker, It gets removed so you can add something else in. But that's doesn't seem to work on Safari browsers at the moment, okay.

So, there are, at the moment there are design considerations, but I think, they probably still make it for me, they make it worth looking to not have to deal with JavaScript and how that might fail for people and all the other considerations. I still think, we can design. accordions just with details and summary quite well.

Yeah. Okay. Okay. we said we'll take everything by SEO. There's not much I can say on SEO. I did a bit of research, to see what was being said about this. And as far as I know, if we're using details and summary, which is great, is the fact that search engines will be able to find the content that's within them.

Will also, and this is the big bonus which we won't get with the JavaScript solution, is that we get. in page search, it will open up the tabs to find the content within those by default, which you won't necessarily, which it's difficult to achieve actually with JavaScript. So there are some benefits, I think, and I think also, there are different reports out there because the, bottom line I think with Google is, don't worry about your hidden content.

We'll find it, but other people do experiments and they say that might not be true under certain circumstances.

[00:24:02] Nathan Wrigley: So.

just to clarify that, then, if you are just using a regular details and summary, then if you, embed content in there and somebody search is searching for that content, Google can find it.

But not only that in the browser will automatically open that, summary area in order to reveal it when you do that search and then ultimately, tap to find it. Okay.

[00:24:27] David Waumsley: If the search finds it, but also if you're just on your page and you're using, what controller f or whatever Yeah, exactly that.

Yeah. It will open up the right tabs. I say that there is a caveat That will be the case by the end of this year. By 2006. It should be, at the moment it's just working in the chromium browsers, okay.

[00:24:48] Nathan Wrigley: Okay,

[00:24:49] David Waumsley: we're running a bit ahead with that. that was it. There were the only other little thing I looked at that I thought was a SEO consideration 'cause it made me think about FAQs and there was a big thing wasn't there, about using schema markups.

Yes. Yeah, for these things and getting, yeah, I think this is my understanding. I'd love to be corrected if I'm wrong, but reading what they say, I think it's really only something you'd want to do for the sort of bonafide health organizations or government sites where they've got frequently asked questions because they've really downgraded it.

I think you know the user AI to find most of the stuff, and they're not interested unless you are, a big, legit company with some real, serious, frequently asked questions that are. gonna be, checked. yeah. So I don't think the whole marking up a schema, but effectively that would be its own thing anyway.

You would just be, if you were still using schema, you would only be linking it to the IDs of your separate panels anyway,

[00:25:47] Nathan Wrigley: Okay. Okay. Alright, that's it. So that's an in conclusion then,

[00:25:53] David Waumsley: Yeah. I, think as our show is the no script show. our thing is to try and make websites as simple as possible.

So where the reason why we're gathering these sort of snippets is that we can put together some more builds later as easily as possible for anyone can do it. as we're no good at scripting languages, we wanna avoid js and it just. So there are some situations where we need JavaScript. So if we want something where it's a toggle, as we said, where we want to open everything up or close it all in one go, we need JavaScript for that.

And I think under a circumstance like that and another circumstance where we might want a actual heading to be the trigger for our panel. For the meaning there. Under those circumstances, we need JavaScript, but I actually think I would for those kind of things, I would do something like Josh Komo does on his blog post where I'd create my own little anchor tags that scroll down to the header for that.

[00:26:54] Nathan Wrigley: Yeah. So that's really useful if it's essentially you've got a whole page kind of accordion there, haven't you? You, yes. Put something in a sidebar because it just makes it so much easier to get from point A to point B. but that really wouldn't work as an accordion 'cause you'd be just hiding so much content and when you open one up, it would be just like this massive scroll to, to get to the other one.

Yeah. That's superior in that scenario, isn't it?

[00:27:19] David Waumsley: I think so. I can't think of a situation. Maybe you can where I think the. Using details and summary to make a, an exclusive, accordion is something I will use where I need to save space in. Yep. Particularly with that Logitech thing. Yep. On the shopping I can say I use that, but for anything else where it needs JavaScript, I actually now think I'm at the point where I'd use a different pattern.

[00:27:40] Nathan Wrigley: Okay.

[00:27:41] David Waumsley: Yeah. I If you,

[00:27:43] Nathan Wrigley: I think hiding content is its primary purpose, isn't it? It's just taking something which you wish to be discoverable. But you don't wish for the person necessarily to see, so it's basically information which not everybody needs. So an FAQ is a great example of that. because if you are, if you, really genuinely don't need an answer to the 15 questions that you've got on, they're just one of them, that's the one you wanna hone into, but you wanna be able to just summarize the titles quickly.

Is it this question? No, click on this one. There's my answer, and then move on. But the example that you just gave from Josh Yeah. that wouldn't work. 'cause all of that whole page is supposed to be the content. You don't really wanna hide anything. Yeah, you just wanna navigate to it quickly.

Yeah.

[00:28:26] David Waumsley: And that's how, what Wikipedia do, they've got. Yep. basically anchor tags that take you to where you need to go. And I think that's a good way

[00:28:34] Nathan Wrigley: of doing this. And you

[00:28:34] David Waumsley: keep all your headers, Yeah.

[00:28:36] Nathan Wrigley: Yep. Yeah. And you can deep link from elsewhere, can't you? Which is quite nice. Yeah. Yeah. just to be, just to help people navigate this, let's say people are getting to the end of this piece of audio content.

There's gonna be some associated. Like tutorials if you like. You're gonna do some run throughs of how you actually build all of this. Where will Thats surf surface on our website. Will it be available in a particular spot?

[00:28:58] David Waumsley: Yes. This one will come up 'cause it's following on from the learn videos I did. So what we're just gonna go and do now is, it will be available on the no Script show slash learn slash 12.

[00:29:13] Nathan Wrigley: Got it. Okay, so they're not in sync. So 20. So this is the no script show, forward slash 20. It doesn't map. It's not go to Learn dash 20. So we're gonna be no script show Forward slash learn. And then obviously from forward slash Learn you be able to see things. But coincidentally, this one is gonna be forward slash.

12 at the end as well. Okay. Makes perfect sense. There's a, there's some little, there's some little teaser. Yes. So yeah, that's a really nice development that we're doing. We're doing these audio video pieces of content where you can see us discuss the problem if you like, and then we're gonna go pause the video and then make some other content, around how to actually build it.

So that's quite nice. New development for this whole. Whole enterprise. Are we done for today though? Yeah. So it's just buy to our audio. Okay. In that case, yeah. See you later. Audio listeners. for the rest of you, we will continue and crack on with our learn. I'll see you in a minute.