How to do an accordion with HTML and JS

Question

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.

Answer 1

1. Add onclick event to the greater than icon
2. Next add id to .panel div
3. Next in script write the logic for hide and show, please refer to below code snippet

function showDropDown(){
  const targetDiv = document.getElementById("panelDivId");
  if (targetDiv.style.display !== "none") {
    targetDiv.style.display = "none";
  } else {
    targetDiv.style.display = "block";
  }
}

<div class="row">
                    <div class="col-2">
                        <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1" onclick="showDropDown()">greaterThanIcon</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" id="panelDivId" 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>