HTML, CSS and JavaScript can help you create stylish and dynamic web elements. One of those kind of element is an Accordion Menu.
In this tutorial...
For further actions, you may consider blocking this person and/or reporting abuse
Very well-made tutorial! Love the imagery and how you annotate/explain the code blocks.
I definitely recommend looking into the details HTML element. Besides no longer needing Javascript, it also makes the accordion more accessible, allowing assistive tools like screen readers to announce when something can be collapsed or expanded.
Using just divs, you would have to manually add aria roles, labels, and possibly controls to achieve the same thing.
Hi Timothy,
Thanks a lot.
Indeed you are right! I hadn't realized that technicality between summary and heading, and thought putting a heading in the summary would be enough.
There are other big things missing from a pure details+summary implementation, like collapsing other details and navigation with arrow keys. I suppose it depends on the degree to which a true accordion is needed or if a set of collapsibles is enough.
Or you could use the summary html tag who does all of that work for you ! No JS that way !
Makes sense.
Hey Kingsley, this is a solid tutorial!
Would you be interested in writing some tutorials for our companies? Happy to pay! You can either DM me on twitter at twitter.com/AndrewPierno or fill out this little airtable form airtable.com/shrN6S3NMZ7oxRXTt.
Sent you a DM on Twitter.
What if the content exceeds the 150px height?
Height could be increased.
you can use overflow y auto, this will allow you to scroll down once your text exceeds the height limit
Perfect!
Since the button sits inside the H3 you can place role="heading" aria-level="3" on summary and inside just a button to trigger which takes the full width.
Even if it's saying to use a H3 it doesn't make sense to me because this raises the question what would you do when you want to use H2 inside the accordion? You are not allowed to skip headlines as far as I know ^^
Also in the example since they are not using icons displaying with content attribute in CSS, why isn't there aria-hidden true on that icon?
Nice!!! I also made one, with slightly different approach.
vanillaweb.vercel.app/accordion
That looks very nice!
👍
In JS part, why did you get elements as HTMLCollection by using getElementsByClassName method?
In this case, I get a NodeList instead and use a forEach method. Because the code becomes simpler.
Hi!
I am new to front end developement, can someone please tell why we didn't use ::after because I changed it to ::after in my code and couldn't see any difference in the layout
Aw Project simple code HTML.
Audio
Product Simple Www.alhikmah.my.id/p/mp3-al-quran.html
Great tutorial
Thanks.
A great step by step guide, great work!
Thank you!
A alternative way is to skip the javascript and go with the label & checkbox solution, since it can get the same behavior without javascript