JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<button class="accordion">Design <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
        <div class="panel"><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste veritatis maiores doloribus ex, culpa tenetur?</p></div>
    <button class="accordion">Development <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
        <div class="panel"><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. At rerum a voluptate nesciunt! Quam, inventore.></div>
    <button class="accordion">Search Engine Optimisation <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
        <div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, blanditiis. Corporis maxime eum nemo delectus.</p></div>
    <button class="accordion">Progressive Web Apps <img src="./assets/img/down.svg" alt="caret-down" class="caret"></button>
        <div class="panel"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa consequuntur obcaecati iste odit vero mollitia.</p></div>

CSS

#services .accordion{
    font-size:1rem;
    background-color:rgba(245, 246, 250,0.4);
    cursor:pointer;
    padding:18px;
    width:100%;
    border:none;
    outline:none;
    display:flex;
    justify-content:space-between;
    width:68vw;
    text-align:right;
}
#services .active, .accordion:hover{
    background-color:rgba(245, 246, 250,0.4);
    color:rgba(0, 151, 230,1.0);
}
#services .panel{
    background-color:rgba(245, 246, 250,0.4);
    display:none;
    width:100%;
    justify-content:center;
    text-align:center;
}
#services .caret{
    width:12px;
}

JavaScript

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");

    var panel = this.nextElementSibling;
    if (panel.style.display === "flex") {
      panel.style.display = "none";
    } else {
      panel.style.display = "flex";
    }
    arrow.setAttribute("transform", "rotate(-45deg)");
  });
}