When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top.
This is my HTML code:
<div class="acc">
<div class="acc-titel">Graphic Designer - London</div>
<div class="acc-content">
<h2>Lorem ipsum dolor sit</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a</p>
</div>
</div>
And this is my CSS code:
.acc-titel {
position: relative;
background: #fff;
padding: 20px;
margin-bottom: 15px;
color: #08455c;
transition: background 0.1s ease, transform 0.2s ease, box-shadow 0.2s ease;
font-size: 30px;
border: 2px solid #08455c;
}
.acc-titel:after {
font-family: "IBM Plex Mono", monospace;
font-weight: 100;
content: "+";
font-size: 1.8em;
line-height: 0.7em;
color: #08455c;
float: right;
height: 20px;
width: 20px;
text-align: center;
transition: all 0.4s cubic-bezier(0.5, 0.2, 0.3, 1);
}
.acc-titel:hover {
z-index: 2;
cursor: pointer;
box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.2);
}
.active:after {
content: "+";
transform: rotate(405deg);
}
.acc-content {
max-height: 0;
opacity: 0;
transform: translateY(5px);
background: #fff;
padding: 0 20px;
margin-bottom: 1px;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.8s ease, transform 0.8s ease;
}
.acc-content p {
font-size: 16px;
}
You can view the issue on this Codepen link: https://codepen.io/mrsalami/pen/LBazMm