{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/css3-accordion/","result":{"data":{"markdownRemark":{"id":"a6e0df3d-e7e2-554b-8dcd-470d687ce6c4","excerpt":"Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no…","html":"

Hello everybody, in this article, we will learn how to make a beautiful accordion with HTML and CSS only! Yes! You heard that right, plain HTML, and CSS with no Javascript at all!

\n

Let's Begin

\n

Firstly, let's make some markup with HTML. We are going to create a div and give it a class of accordion like so:

\n
<div class="accordion">\n\n</div>
\n

Next, inside the accordion div, we will create another div, this time without a class.

\n
<div class="accordion">\n  <div>\n  \n  </div>\n</div>
\n

Next up, we will create a checkbox or a radio button. We are creating a checkbox or a radio button so that we can make their checked states open or close the accordion. So if you want to be able to open all accordions at the same time, you will use checkbox, otherwise you will use radio buttons. But in this article, I've chosen to use checkbox.\nWe will give the checkbox an id of section1 and a class of accordion__input.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n  </div>\n</div>
\n

Under the checkbox, we are going to create a label for the checkbox. This label will later on become the head of the accordion tab.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n  </div>\n</div>
\n

Next, we will create a new div and give it a class of accordion__content because it will hold the content of the accordion. In this example, we will make the content of the accordion a paragraph.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n</div>
\n

Repeat the div without a class for as many as you want depending on how many accordion tabs you want. In this example, we will use only three of them.

\n
<div class="accordion">\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n  <div>\n    <input type="checkbox" id="section1" class="accordion__input">\n    <label for="section1" class="accordion__label">Section #1</label>\n    <div class="accordion__content">\n      <p>\n        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, earum, magnam? Alias error, placeat! Accusamus accusantium alias eum iure laborum odit porro quaerat? Animi enim id labore officiis quam sint.\n      </p>\n    </div>\n  </div>\n</div>
\n

That's it with the HTML, and it should be looking like this:\n\n div with the class of accordion.\nWe will give it a:

\n\n

So now we have:

\n
.accordion{\n    max-width: 400px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n    border-radius: 15px;\n    overflow: hidden;\n    background-color: purple;\n}
\n

Now we will set some padding to the label and content so that there is some space between them and their borders.

\n
.accordion__label, .accordion__content{\n    padding: 14px 20px;\n}
\n

Next, we will style the accordion label and set the following properties:

\n\n

So it looks like this when combined:

\n
.accordion__label{\n    display: block;\n    color: white;\n    font-weight: bold;\n    cursor: pointer;\n    position: relative;\n    transition: background-color 0.1s;\n}
\n

Now, we will make the color of the label darker when the user hovers on it. This is also to make the user know that he/she has placed the cursor on something that can be clicked.

\n
.accordion__label:hover{\n    background-color: rgba(0, 0, 0, 0.1);\n}
\n

Next up, we will style the content of the accordion and set the following properties:

\n\n

So when we put it together, we have this:

\n
.accordion__content{\n    background: white;\n    line-height: 1.6;\n    font-size: 0.85em;\n    display: none;\n}
\n

Now we have to hide the checkbox from showing. To do that, we set the display property of it to none

\n
.accordion__input{\n    display: none;\n}
\n

The next thing to do is to show the accordion tab's content if the label is clicked. To do this, we have to set the display property of it to block when the label is clicked. We can know that the label is clicked using the check-state of the checkbox that we hid earlier.

\n
.accordion__input:checked ~ .accordion__content{\n    display: block;\n}
\n

Hurray🎉, we now have a lovely and functioning accordion that looks like this\n\n