How to change the border style when click expand and collapse

I am creating a button where I want to click and expand, and get rid of the bottom border and when I expand it I want the bottom border to come back, so I create a function where when I click once, its modulo cannot divide by two and when I click one more time, which is collapse, the count for the button to click is 2 so it can be divided by 2. Below is my code but I don’t know why it won’t work.

<script>
 function hideBorder() {
      var count = 0;
      var btn = document.getElementById("chi");
      if (btn.onclick) {
        count++;
      }

      if (count % 2 == 0) {
        doucment.getElementById("chi").style.borderBottom = "2px solid #65daff";
        document.getElementById("chi").style.borderEndEndRadius = "10px";
        document.getElementById("chi").style.borderEndStartRadius = "10px";
      } else if (count % 2 == 1) {
        doucment.getElementById("chi").style.borderBottom = "none";
        document.getElementById("chi").style.borderEndEndRadius = "0px";
        document.getElementById("chi").style.borderEndStartRadius = "0px";
      }
    }
</script>