Web components are building blocks of any UI, we often find ourselves trying to build one from scratch, when none of the UI libraries out there can suit our project. However, building one from scratch can be a hassle since most components require javascript to make them interactive. In this tutorial, we will build an accordion web component that relies only on html and css, no javascript. But first let's understand what an accordion component is.

Accordion often will show as a list of items, each having a header that allows the user to make them expand or collapse. each item is responsive to the rest, by automatically collapsing as soon as one expands. There are some variations where all the items can stay expand, but in this guide we will stick with the former. Now let's discuss our strategy on building this component.

The core of this web component is a an html buil-in component you all know very well, Input with type radio. Yes this simple html tag is all we will need to make our accordion web component interactive. Most of you have already used that element, so you are well familiar with its behaviour, but for those who haven't, let's try to explain and understand how this component can be related to an accordion.

The main function of that element is to allow user to make an exclusive selection, this means if the user is offered multiple option, it can only select one, no more. The input type radio will automatically deactivate any option we haven't selected and keep only the selected one active. You are starting to get how this will be useful for our component, indeed our component will behave the same way and keep only the item the user selects expand, and the rest of them will collapse.

See the Pen accordion-1 by devspot (@devspot) on CodePen.

All four tags are sharing the same attribute name. This is how html binds the elements together and make them react to each other. We are going to use the input tag as a trigger (accordion header) to expand our item. In order to accomplish that we need to connect each item header to its corresponding input, to do so we will use the label tag.

Label tag is another useful html build-in element we often see in user form. The element basically can be connected to any input tag and will trigger the input response each time it's clicked on, to make the connection, we need to add the for attribute to the label and the corresponding id attribute to the input.

See the Pen accordion-2 by devspot (@devspot) on CodePen.

If you click on the text, it will trigger the input element, the same way it did before. So now we don't need the input tag anymore, let's hide them and add some css.

See the Pen accordion-3 by devspot (@devspot) on CodePen.

We are getting close to the final result, we also need all item to collapse by default, let's make sure of that.

See the Pen accordion-4 by devspot (@devspot) on CodePen.

In order to make the component reactive, we can rely on css pseudo class selector :checked that allows us to style based on the input state. If you take a look to the html, you will notice the input tag being just on the top of the item body, this will allow us to hide the item body based on the state of the input element that comes just before it. Let's get that done.

See the Pen accordion-5 by devspot (@devspot) on CodePen.

And there you go, the final result, a perfectly functional accordion that relies only on css with transition when the item expands and collapses.

Even though a component is easy to build this way, it's lacking web accessibility that usually allow the component to be manipulated from the keyboad. Despite that minor defect, this is still a great way to showcase your skills by building simple project.

This wraps up this tutorial, hope this has been useful to you, see you in the next one.