How to do an accordion with HTML and JS

I want an accordion to drop down when a user clicks on the greater than sign.

    <div class="row">
                    <div class="col-2">
                        <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1"></i></button></p>
                    </div>
                    <div class="col-3">
                        <P>Omodeko Divine</P>
                    </div>
                    <div class="col-2">
                        <p>EE</p>
                    </div>
                    <div class="col-3">
                        <p>[ETHIOPE EAST]</p>
                        <P>DELSU HEALTH CENTER ABRAKA</P>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-primary">GENERATE ID</button>
                    </div>
                    <div class="panel" onclick="document.getElementByclassname(panel).style.display='none'">
                      <p>No, but there must be adequate evidence that would help to support your claim.</p>
                    </div>
                </div>

This is the javascript

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

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("activee");

/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
  panel.style.display = "none";
} else {
  panel.style.display = "block";
}});}

On click of the greater than sign, the .panel is supposed to dropdown.