If you are really passionate about web performance and you are not really fond of JavaScript, then you have come to the right tutorial.
As a seasoned web developer in Fort Worth and Dallas Texas, I am personally passionate about building super fast and minimalistic websites.
That’s why in here, I am going to show you how to create a pure CSS accordion without JavaScript.
Don't waste your time
Before proceeding and for you to not waste your time, please check the demo below, so you can be sure this is what you need
.DEMO: CSS Accordion No JS. (opens in new window)
If that's what you want, then let's proceed.
NOTE: If you want to add CSS3 animations, arrows, plus and minus signs, please check the other tutorials at the end of this article.
Also and before continue, please don't forget to check this pure CSS accordions collection
You will find there more than 18 demos to get more inspiration with your pure CSS accordions.
Now, I am not going to get all technical and stuff because this is simple.
However if you know HTML and CSS it will be much better.
Let's start with the basic HTML5 base.
Your HTML5 base
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Accordion</title> </head> <body> </body> </html>
Sample #1
Your First Accordion
Now let's build our initial HTML markup for the first accordion.
In here we will use the following HTML tags:
<input> <label> <div> <p>
Sample #2
From 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".
Then inside the "label" tag, I will be using the attribute "for" with the value "title1".
NOTICE: how the attributes "id" and "for" will have the same value "title1".
This is really important for you to remember if you are planning to have more than one accordion.
And finally, see inside the "div" tag how I am going to be using the attribute "class" with the value "content".
See below.
<input type="checkbox" id="title1" /> <label for="title1">Accordion One</label> <div class="content"> <p>Your content goes here.</p> </div>
Sample #3
Duplicating the accordion
Now let's duplicate this accordion and create two more.
Second accordion.
<input type="checkbox" id="title2" /> <label for="title2">Accordion Two</label> <div class="content"> <p>Your content goes here.</p> </div>
Sample #4
Third accordion.
<input type="checkbox" id="title3" /> <label for="title3">Accordion Three</label> <div class="content"> <p>Your content goes here.</p> </div>
Sample #5
Changing the values inside the attributes "id" and "for"
Now make sure every time you create a new accordion.
The values inside the attributes "id" and "for" always match and change accordingly.
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".
Accordion values will always be the same inside the attributes "id" and "for" but they will always be different inside each new accordion you create.
Let's see now how our full HTML markup looks together for all three accordions.
Full and final HTML markup
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Accordion</title> </head> <body> <input type="checkbox" id="title1" /> <label for="title1">Accordion One</label> <div class="content"> <p>Your content goes here inside this division with the class "content".</p> </div> <input type="checkbox" id="title2" /> <label for="title2">Accordion Two</label> <div class="content"> <p>Your content goes here inside this division with the class "content".</p> </div> <input type="checkbox" id="title3" /> <label for="title3">Accordion Three</label> <div class="content"> <p>Your content goes here inside this division with the class "content".</p> </div> </body> </html>
Sample #6
Final CSS touchings
Now that we have finished the HTML skeleton of our accordions, is time to beautify all this with CSS.
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.
Hiding the input checkbox
First let's start by hiding the "input" tag as we won't need it to show.
input {
display: none;
}
Sample #7
CSS styles for the label tag
Now let's style the label.
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
}
label:hover {
background: #4E8774;
}
Sample #8
CSS styles for the div tag with the content class
Then let's style the "div" tag.
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
Sample #9
CSS styles for hiding and showing content
And finally let's add the pseudo class to show and hide the content.
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
Sample #10
Full CSS styles altogether
And here it is, everything together.
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
}
label:hover {
background: #4E8774;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
Sample #11
Final HTML and CSS styles together
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Accordion</title>
<style>
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #6AAB95;
border-radius: 3px;
color: #FFF;
transition: ease .5s;
}
label:hover {
background: #4E8774;
}
.content {
background: #E2E5F6;
padding: 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 3px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" />
<label for="title1">Accordion One</label>
<div class="content">
<p>Your content goes here.</p>
</div>
<input type="checkbox" id="title2" />
<label for="title2">Accordion Two</label>
<div class="content">
<p>Your content goes here.</p>
</div>
<input type="checkbox" id="title3" />
<label for="title3">Accordion Three</label>
<div class="content">
<p>Your content goes here.</p>
</div>
</body>
</html>
Sample #12
As you can see all this is really easy.
Creating great things in web development without the need of JavaScript is possible.
To download this work, please use the link below.
LINK:Download Code
If you have comments and/or suggestions, please don't forget to send them to me by using the green button below.
And please never forget, keep it always KISS.
KISS = Keep It Simple Stupid
0 komentar:
Posting Komentar