Responsive Expandable Comment Box

Written by @kerixa 25 May 2020

If you are gathering the opinions about something, you need a platform. The following code provides some expandable panels with the ability to put agreements and disagreements in various forms and summarize them in the panel title. The panel is responsive and adjust itself to the screen width. Enjoy!

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
<style>
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 .2s, opacity .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 .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;
  }
}
</style>
<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><a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2