To download this work, please use the link below. Sample #11 Final HTML and CSS styles togetherĬreating great things in web development without the need of JavaScript is possible. Sample #9 CSS styles for hiding and showing contentĪnd finally let's add the pseudo class to show and hide the content. Sample #8 CSS styles for the div tag with the content class Hiding the input checkboxįirst let's start by hiding the "input" tag as we won't need it to show. In here we will only style the tag "label", the tag "div" with the class "content" and at the end we will use the pseudo class ":checked" to create the interactive action for showing and hiding the content. Now that we have finished the HTML skeleton of our accordions, is time to beautify all this with CSS. Your content goes here inside this division with the class "content".
Let's see now how our full HTML markup looks together for all three accordions. In this case notice how my first accordion has the value "title1", the second accordion has the value "title2" and the third accordion has the value "title3".Īccordion values will always be the same inside the attributes "id" and "for" but they will always be different inside each new accordion you create. The values inside the attributes "id" and "for" always match and change accordingly. Now make sure every time you create a new accordion. Sample #5 Changing the values inside the attributes "id" and "for" Now let's duplicate this accordion and create two more.
This is really important for you to remember if you are planning to have more than one accordion.Īnd finally, see inside the "div" tag how I am going to be using the attribute "class" with the value "content". NOTICE: how the attributes "id" and "for" will have the same value "title1". Then inside the "label" tag, I will be using the attribute "for" with the value "title1". In here we will use the following HTML tags:įrom sample #3 below, see how inside the HTML tag "input" I will be using the attribute "type" with the value "checkbox" and the attribute "id" with the value "title1". Now let's build our initial HTML markup for the first accordion. However if you know HTML and CSS it will be much better. Now, I am not going to get all technical and stuff because this is simple. You will find there more than 18 demos to get more inspiration with your pure CSS accordions.
NOTE: If you want to add CSS3 animations, arrows, plus and minus signs, please check the other tutorials at the end of this article.Īlso and before continue, please don't forget to check this pure CSS accordions collection If that's what you want, then let's proceed. Don't waste your timeīefore proceeding and for you to not waste your time, please check the demo below, so you can be sure this is what you need.ĭEMO: CSS Accordion No JS.
That’s why in here, I am going to show you how to create a pure CSS accordion without JavaScript. If you are really passionate about web performance and you are not really fond of JavaScript, then you have come to the right tutorial.Īs a seasoned web developer in Fort Worth and Dallas Texas, I am personally passionate about building super fast and minimalistic websites.