An accordion is a user interface element that allows you to hide and reveal content sections when a user interacts with it. This code implements a modern accordion in HTML and CSS. It allows you to create expandable sections that reveal additional content when clicked.
The major functionality of this code is to create interactive tabs with expandable content for organizing and displaying information efficiently on a web page. It helps in presenting information in a structured and user-friendly manner.
How to Create Accordion Using HTML and CSS Only
1. First, load the Google Fonts by adding the following CDN link into the head tag of your HTML document. (Optional)
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
2. Create the HTML structure for the accordion as follows. Inside the <div id="aspect-content">, you can create your accordion tabs and content. Each tab should consist of an <input> element with a corresponding <label> and a nested <div> for the content. Here’s an example of one accordion tab:
<div id="aspect-content">
<div class="aspect-tab ">
<input id="item-18" type="checkbox" class="aspect-input" name="aspect">
<label for="item-18" class="aspect-label"></label>
<div class="aspect-content">
<div class="aspect-info">
<div class="chart-pie negative over50">
<span class="chart-pie-count">-69</span>
<div>
<div class="first-fill"></div>
<div class="second-fill" style="transform: rotate(249deg)"></div>
</div>
</div>
<span class="aspect-name">Lorem ipsum</span>
</div>
<div class="aspect-stat">
<div class="all-opinions">
<span class="all-opinions-count">18</span>
<span>opinion</span>
</div>
<div>
<span class="positive-count">4</span>
<span class="neutral-count">1</span>
<span class="negative-count">13</span>
</div>
</div>
</div>
<div class="aspect-tab-content">
<div class="sentiment-wrapper">
<div>
<div>
<div class="positive-count opinion-header">
<span>positive</span>
<span>4</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
<div>
<div>
<div class="neutral-count opinion-header">
<span>neutral</span>
<span>1</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
<div>
<div>
<div class="negative-count opinion-header">
<span>negative</span>
<span>13</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aspect-tab ">
<input id="item-14" type="checkbox" class="aspect-input" name="aspect">
<label for="item-14" class="aspect-label"></label>
<div class="aspect-content">
<div class="aspect-info">
<div class="chart-pie positive over50">
<span class="chart-pie-count">58</span>
<div>
<div class="first-fill"></div>
<div class="second-fill" style="transform: rotate(209deg)"></div>
</div>
</div>
<span class="aspect-name">Lorem ipsum dolor sit amet</span>
</div>
<div class="aspect-stat">
<div class="all-opinions">
<span class="all-opinions-count">22</span>
<span>opinion</span>
</div>
<div>
<span class="positive-count">12</span>
<span class="neutral-count">5</span>
<span class="negative-count">5</span>
</div>
</div>
</div>
<div class="aspect-tab-content">
<div class="sentiment-wrapper">
<div>
<div>
<div class="positive-count opinion-header">
<span>positive</span>
<span>12</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
<div>
<div>
<div class="neutral-count opinion-header">
<span>neutral</span>
<span>5</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
<div>
<div>
<div class="negative-count opinion-header">
<span>negative</span>
<span>5</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aspect-tab ">
<input id="item-2" type="checkbox" class="aspect-input" name="aspect">
<label for="item-2" class="aspect-label"></label>
<div class="aspect-content">
<div class="aspect-info">
<div class="chart-pie positive">
<span class="chart-pie-count">33</span>
<div>
<div class="first-fill"></div>
<div class="second-fill" style="transform: rotate(119deg)"></div>
</div>
</div>
<span class="aspect-name">Lorem</span>
</div>
<div class="aspect-stat">
<div class="all-opinions">
<span class="all-opinions-count">7</span>
<span>opinion</span>
</div>
<div>
<span class="positive-count">3</span>
<span class="neutral-count">2</span>
<span class="negative-count">2</span>
</div>
</div>
</div>
<div class="aspect-tab-content">
<div class="sentiment-wrapper">
<div>
<div>
<div class="positive-count opinion-header">
<span>positive</span>
<span>3</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
</div>
</div>
<div>
<div>
<div class="neutral-count opinion-header">
<span>neutral</span>
<span>2</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
<div>
<div>
<div class="negative-count opinion-header">
<span>negative</span>
<span>2</span>
</div>
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In the above HTML, replace the placeholder content inside each accordion tab and content section with your own text, images, or other HTML elements. You can add any content you want to display when a tab is expanded.
3. Create a separate CSS file named styles.css and add the following CSS code to style your accordion. This CSS code is responsible for the appearance and functionality of the accordion tabs.
body {
background-color: #6fcae7;
overflow-y: scroll;
overflow-x: hidden;
}
#aspect-content {
margin: 50px 0 0;
font-family: "Poppins", sans-serif;
}
#aspect-content * {
box-sizing: border-box;
}
.aspect-tab {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto 10px;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 0 0 1px #ececec;
opacity: 1;
transition: box-shadow 0.2s, opacity 0.4s;
}
.aspect-tab:hover {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
}
.aspect-input {
display: none;
}
.aspect-input:checked ~ .aspect-content + .aspect-tab-content {
max-height: 3000px;
}
.aspect-input:checked ~ .aspect-content:after {
transform: rotate(0);
}
.aspect-label {
position: absolute;
top: 0;
left: 0;
height: 100%;
max-height: 80px;
width: 100%;
margin: 0;
padding: 0;
font-size: 0;
z-index: 1;
cursor: pointer;
}
.aspect-label:hover ~ .aspect-content:after {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
}
.aspect-content {
position: relative;
display: block;
height: 80px;
margin: 0;
padding: 0 87px 0 30px;
font-size: 0;
white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
}
.aspect-content:before, .aspect-content:after {
content: "";
display: inline-block;
vertical-align: middle;
}
.aspect-content:before {
height: 100%;
}
.aspect-content:after {
position: absolute;
width: 24px;
height: 100%;
right: 30px;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
}
.aspect-name {
display: inline-block;
width: 75%;
margin-left: 16px;
font-weight: 500;
color: #242a32;
white-space: normal;
text-align: left;
vertical-align: middle;
}
.aspect-stat {
width: 40%;
text-align: right;
}
.all-opinions,
.aspect-name {
font-size: 14px;
line-height: 22px;
}
.all-opinions {
color: #5d5d5d;
text-align: left;
}
.aspect-content + .aspect-tab-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s;
}
.aspect-content > div,
.aspect-stat > div {
display: inline-block;
}
.aspect-content > div {
vertical-align: middle;
}
.positive-count,
.negative-count,
.neutral-count {
display: inline-block;
margin: 0 0 0 20px;
padding-left: 26px;
background-repeat: no-repeat;
font-size: 13px;
line-height: 20px;
color: #363636;
}
.positive-count {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiM3RUQzMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxMS40MjdhNSA1IDAgMCAwIDEwIDAgLjcxNC43MTQgMCAxIDAtMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMS03LjE0MiAwIC43MTQuNzE0IDAgMSAwLTEuNDI5IDB6bTEuMDcxLTVhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MyAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
}
.negative-count {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNGRjZFMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxNC45OThhLjcxNC43MTQgMCAwIDAgMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMSA3LjE0MiAwIC43MTQuNzE0IDAgMSAwIDEuNDI5IDAgNSA1IDAgMSAwLTEwIDB6bTEuMDcxLTguNTdhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MiAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDIgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
}
.neutral-count {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNCQUMyRDYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNS43MTQgMTEuNDI3YS43MTQuNzE0IDAgMSAwIDAgMS40MjloOC41NzJhLjcxNC43MTQgMCAxIDAgMC0xLjQyOUg1LjcxNHptLjM1Ny01YTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3ptNy44NTggMGExLjA3MSAxLjA3MSAwIDEgMCAwIDIuMTQzIDEuMDcxIDEuMDcxIDAgMCAwIDAtMi4xNDN6Ii8+Cjwvc3ZnPgo=");
}
.aspect-info {
width: 60%;
white-space: nowrap;
font-size: 0;
}
.aspect-info:before {
content: "";
display: inline-block;
height: 44px;
vertical-align: middle;
}
.chart-pie {
position: relative;
display: inline-block;
height: 44px;
width: 44px;
border-radius: 50%;
background-color: #e4e4e4;
vertical-align: middle;
}
.chart-pie:after {
content: "";
display: block;
position: absolute;
height: 40px;
width: 40px;
top: 2px;
left: 2px;
border-radius: 50%;
background-color: #fff;
}
.chart-pie-count {
position: absolute;
display: block;
height: 100%;
width: 100%;
font-size: 14px;
font-weight: 500;
line-height: 44px;
color: #242a32;
text-align: center;
z-index: 1;
}
.chart-pie > div {
clip: rect(0, 44px, 44px, 22px);
}
.chart-pie > div,
.chart-pie.over50 .first-fill {
position: absolute;
height: 44px;
width: 44px;
border-radius: 50%;
}
.chart-pie.over50 > div {
clip: rect(auto, auto, auto, auto);
}
.chart-pie.over50 .first-fill {
clip: rect(0, 44px, 44px, 22px);
}
.chart-pie:not(.over50) .first-fill {
display: none;
}
.second-fill {
position: absolute;
clip: rect(0, 22px, 44px, 0);
width: 100%;
height: 100%;
border-radius: 50%;
border-width: 3px;
border-style: solid;
box-sizing: border-box;
}
.chart-pie.positive .first-fill {
background-color: #82d428;
}
.chart-pie.positive .second-fill {
border-color: #82d428;
}
.chart-pie.negative .first-fill {
background-color: #ff6e00;
}
.chart-pie.negative .second-fill {
border-color: #ff6e00;
}
.aspect-tab-content {
background-color: #f9f9f9;
font-size: 0;
text-align: justify;
}
.sentiment-wrapper {
padding: 24px 30px 30px;
}
.sentiment-wrapper > div {
display: inline-block;
width: 33.3%;
max-width: 390px;
padding: 0 5px;
box-sizing: border-box;
vertical-align: top;
cursor: default;
}
.sentiment-wrapper > div > div {
width: 100%;
padding: 16px 24px 20px;
box-sizing: border-box;
border-radius: 4px;
background-color: #fff;
border: 1px solid #ececec;
text-align: left;
}
.opinion-header {
position: relative;
width: 100%;
margin: 0 0 24px;
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: #242a32;
text-transform: capitalize;
}
.opinion-header > span:nth-child(2) {
position: absolute;
right: 0;
}
.opinion-header + div > span {
font-size: 13px;
font-weight: 400;
line-height: 22px;
color: #363636;
}
@media screen and (max-width: 800px) {
.aspect-label {
max-height: 102px;
}
.aspect-content {
height: auto;
padding: 10px 87px 10px 30px;
}
.aspect-content:before {
display: none;
}
.aspect-content:after {
top: 0;
}
.aspect-content > div {
display: block;
width: 100%;
}
.aspect-stat {
margin-top: 10px;
text-align: left;
}
}
@media screen and (max-width: 750px) {
.sentiment-wrapper > div {
display: block;
width: 100%;
max-width: 100%;
}
.sentiment-wrapper > div:not(:first-child) {
margin-top: 10px;
}
}
@media screen and (max-width: 500px) {
.aspect-label {
max-height: 140px;
}
.aspect-stat > div {
display: block;
width: 100%;
}
.all-opinions {
margin-bottom: 10px;
}
.all-opinions + div > span:first-child {
margin: 0;
}
}
If you want to customize the appearance of your accordion further, you can modify the CSS code. Adjust colors, fonts, and other styles to match your website’s design.
That’s all! hopefully, you have successfully created Accordion HTML CSS Only. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
jQuery Responsive Vertical Tabs to Accordion
jQuery Easy Accordion Plugin - monica.js
Horizontal Accordion Slider for jQuery - liteAccordion
Responsive Accordion with jQuery and CSS3 - Accordable.js
Create Nested Accordion with jQuery BeefUp Plugin
jQuery Accordion Plugin Expand all / Open one at a Time
Simple jQuery Accordion Plugin with Arrows
FAQ Page Design in HTML with Source Code
Accordion using Material Design and Bootstrap
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.