user6385931 user6385931 - 6 months ago 55
CSS Question

create and use a CSS form in <Style>, not in <Body> with HTML

I just have learnt HTML recently and have a small program.



var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}

.triangleright {
width: 0;
height: 0;
border: solid 10px;
border-color: transparent transparent transparent green ;
}

.triangledown {
width: 0;
height: 0;
border: solid 10px;
border-color: white transparent transparent transparent ;
}

button.accordion {
background-color: rgb(213,227,233);
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

button.accordion.active {
background-color: rgb(0,56,96);
color: white;
}

button.accordion:after {
/* content:"/2795"; */
content: "<div class="triangleright"></div>";
font-size: 13px;
float:left;
margin-left: 5px;
}

button.accordion.active:after {
/* content:"/2796"; */
content: "<div class="triangledown"></div>";
}

div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}

div.panel.show {
opacity: 1;
max-height: 500px;
}

<button class="accordion">&nbsp; &nbsp; Title</button>
<div class="panel">
<p>Content</p>
</div>





I need to create a small triange before "Title". But when I insert the triangle form which i have created into
button.accordion:after
and
button.accordion.active:after
, that does not work.

Answer

You can't create html elements in content property of CSS, more info

Alternatively you can have another approach, you can put that button in a div, and in the div you can have an absolute position element which shows arrow, and you can handle that div same as you have handle nextElementSibling...

Here is a fiddle which solves your issue

HTML:

<div class="parent">
  <div class="arrow triangleright"></div>
  <button class="accordion">&nbsp; &nbsp; Title</button>
  <div class="panel">
    <p>Content</p>
  </div>
</div>

JAVASCRIPT:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
    this.previousElementSibling.classList.toggle("triangledown");
  }
}

CSS:

.triangleright {
  width: 0;
  height: 0;
  border: solid 10px;
  border-color: transparent transparent transparent green;
}

.triangledown {
  top: 22px !important;
  right: 13px !important;
  width: 0;
  height: 0;
  border: solid 10px;
  border-color: white transparent transparent transparent;
}

button.accordion {
  background-color: rgb(213, 227, 233);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active {
  background-color: rgb(0, 56, 96);
  color: white;
}

.parent {
  position: relative
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease-in-out;
  opacity: 0;
}

.arrow {
  position: absolute;
  top: 16px;
  right: 10px;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}
Comments