Post On : January 22, 2020
Hello developers,
Today, I am going to show you how to make Accordion Element using html and css. (no JavaScript or jquery)
There are two way make the Accordion Element using only html and css.
1.) CSS + HTML only Accordion Element (Using Checkbox Input)
Here is html and css code as below:
<h1>CSS + HTML only Accordion Element (Using Checkbox Input)</h1>
<ul>
<li>
<input type="checkbox" checked>
<i></i>
<h2> Lorem Ipsum 1</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2> Lorem Ipsum 2</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</li>
<li>
<input type="checkbox" checked>
<i></i>
<h2> Lorem Ipsum 3</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</li>
</ul>
p, ul li i:before, ul li i:after {transition: all 0.25s ease-in-out;}
h1, ul li {animation: flipdown 0.5s ease both;}
h2 {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
width: 100%;
height: 100%;
perspective: 900;
overflow-y: scroll;
background-color: #dce7eb;
font-family: "Titillium Web", sans-serif;
color: rgba(48, 69, 92, 0.8);
}
body {
min-height: 0;
display: inline-block;
position: relative;
left: 50%;
margin: 90px 0;
transform: translate(-50%, 0);
box-shadow: 0 10px 0 0 #FE9C6C inset;
background-color: #fefffa;
max-width: 450px;
padding: 30px;
}
@media (max-width: 550px) {
body {
box-sizing: border-box;
transform: translate(0, 0);
max-width: 100%;
min-height: 100%;
margin: 0;
left: 0;
}
}
h1{ color: #000;}
h1 {
text-transform: uppercase;
font-size: 20px;
line-height: 24px;
letter-spacing: 3px;
font-weight: 100;
}
h2 {
font-size: 22px;
line-height: 34px;
font-weight: 300;
letter-spacing: 1px;
display: block;
background-color: #fefffa;
margin: 0;
cursor: pointer; color:#FE9C6C;
}
p {
color: rgba(48, 69, 92, 0.8);
font-size: 17px;
line-height: 26px;
letter-spacing: 1px;
position: relative;
overflow: hidden;
max-height: 800px;
opacity: 1;
transform: translate(0, 0);
margin-top: 14px;
z-index: 2;
}
ul {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
ul li {
position: relative;
padding: 0;
margin: 0;
padding-bottom: 4px;
padding-top: 18px;
border-top: 1px dotted #dce7eb;
}
ul li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
}
ul li i:before, ul li i:after {
content: "";
position: absolute;
background-color: #FE9C6C;
width: 3px;
height: 9px;
}
ul li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}
Output will be there as below:
2.) CSS + HTML only Accordion Element (Using Radio Input)
Here is html and css code as below:
<h1>CSS + HTML only Accordion Element (Using Radio Input)</h1>
<div id="radio-section">
<input type="radio" id="tab1" name="tabs" checked/>
<label for="tab1">Tab1</label>
<div class="tab-content1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<input type="radio" id="tab2" name="tabs"/>
<label for="tab2">Tab2</label>
<div class="tab-content1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
#radio-section{
float:left;
width:100%;
position:relative;
}
#radio-section label{
float:left;
width:100%;
background:#333;
color:#fff;
padding:10px;
text-align:left;
cursor:pointer;
border-bottom:1px solid #fff;
}
#radio-section .tab-content1{
float:left;
width:100%;
padding:0 10px;
height:0;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
overflow:hidden;
}
#radio-section input:checked + label + .tab-content1{
padding: 10px;
height: 120px;
-moz-transition: height 1s ease;
-webkit-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
#radio-section input:checked + label{
background:#ccc;
color:#333;
}
#radio-section input{
display:none;
}
Output will be there as below:
I hope this article will help you 🙂
Catagory :HTML/CSS