The issue is in the title.
I have been trying to fix this for 2 hours now, mostly just googling fixes, but I can't seem to find any that work. So now I'm here.

Anyhow, I have a problem with a javascript toggle that I made.

What I'm trying to do:
Create an expand/collapse button that only expands/collapses a box when you click the arrow

Here's the HTML;

<a id="expand1" value="OFF" type="button" class="btn btn-link collapsed" onclick="toggle(this)">
    <div class="right">
        <i id="arrow" class="animate-icon fa fa-solid fa-angle-up"></i> 
    </div>
</a>

<div id="answer1">
    answer
</div>

here's the JS;

function toggle(button) {
                if (button.value == "OFF") {
                    button.value = "ON";
                    document.getElementById('answer1').style.opacity = "1";
                    document.getElementById('answer1').style.height = "350px";
                }
                else {
                    button.value = "OFF";
                    document.getElementById('answer1').style.opacity = "0";
                    document.getElementById('answer1').style.height = "0px";

                }
            }

What I've tried so far;

• Searching google for answers
• Searching stackoverflow for answers
• Defining "on" or "off" as a variable and using that as a toggle
• trying {if ([variable].style.height == "350px") {}} (I have no idea if this would work or not, just thought I'd try it.)

If anybody has any idea how to fix this, I would appreciate it very much if you were to tell me what I'm able to do to fix this problem. Thanks!