Modern Accordion in HTML CSS Only

by
Modern Accordion in HTML CSS Only
Code Snippet:pure scss accordion tabs
Author: Natalia
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 1,124
License: MIT
Edit Code online: View on CodePen
Read More
 Demo
Download (6 KB)

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:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

F5
X