I've spent probably a couple dozen hours over my web design career writing accordions on my own or with a CSS framework like Bootstrap. It's silly, I know, but I've been kind of obsessed with learning about this tag. I've used Drupal 8 for years and had no idea that the tag was being used here. Our assignment was to change the open/close state of one of the 'tabs' found on the right hand side of a content edit screen in Drupal 8. The way I found out about this was during a Drupal Module Development training a few months ago. You can even add 'open' on multiple or all tabs if you want. Just add the 'open' attribute on the one you want, like so. What if you want to have one of the tabs be opened by default? Hit the 'Tab' key now, and the will be outlined, and press the 'Spacebar' to open and close the accordion.Īnd if you have multiple stacked on top of each other? Keep hitting the 'Tab' key and it will select the next one without us having to add attributes on each. But with the details tag, this comes out of the box. In the previous method, we had to explicitly add some attributes to our s to get these keyboard and screen-reader accessible. Obviously, you'd want to style this with some CSS, but your refined tastes can probably tackle that. How did I not know that this was possible without JavaScript? The first time I did this a few months ago, this felt like a Penn & Teller magic trick. Click that, and it opens up to reveal the text. The first thing you notice: it adds a triangle beside your title. Underneath this summary, we place the body of our accordion. We have a tag with a tag where our title from before goes. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This is elusive to me: How did I not hear about this HTML5 element before? And how many others out there await my discovery?īasically, the tag replaces the two s and JavaScript we had before, plus has accessibility built right in. And truth be told: I've used this on several projects in the past and it does work.īut after learning that there's an HTML5 element which does basically everything out of the box, this will look like a giant amount of code. It's keyboard accessible and tells screen readers which accordion body is open, which they mention in their Accessibility section. The Bootstrap example is a fine way to do this. You can see how this is done in Bootstrap 4's accordion example. Also, the markup and JavaScript above doesn't take into account there being multiple accordions on the page, and you would need to indicate this with id or data- attributes. Try pressing the 'Tab' key and notice that isn't highlighted, nor when you click on it, does it indicate that the accordion body is open. Written as-is, we are missing keyboard and screen reader accessibility. Then with some JavaScript/jQuery, when the title is clicked, we toggle the display of the : $('.collapse-title').click(function() )Īnd this works! Kinda. collapse-details to not appear when the page first loads. The setup here is simple: have one that is the clickable title and another which is the body of the accordion. There are a few different ways you could build this, but I recently learned that there's a way built right into HTML5! But first, let's take a look at the ways I (and probably you) have done this before. If you're a web developer, you've also probably had to code one of these, myself included. Click the title again, and it closes back up. Use the web for a short amount of time and you'll no doubt bump into an accordion, one of those collapsible elements that, when you click on its title, opens up to reveal more information.
0 Comments
Leave a Reply. |