javascript toggle doesn't work on first press

Question

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!

An [`HTMLAnchorElement`](//developer.mozilla.org/en/docs/Web/API/HTMLAnchorElement) does not have a `value` property. The `value` attribute you invented is meaningless and is not reflected as a property. Please don’t misuse HTML elements. Use a button instead. — Sebastian Simon, Mar 28 '22 at 01:32
Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Mar 28 '22 at 01:32

score 0 · Accepted Answer · answered Mar 28 '22 at 01:34

there is no attribute value, this is why first time you click on anchor - condition goes to else branch, I'd suggest to use opacity of answer as determinant of action:

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

<a id="expand1" value="OFF" type="button" class="btn btn-link collapsed" onclick="toggle(this)">
    toggle
</a>

<div id="answer1" style="opacity:0;">
    answer
</div>

javascript toggle doesn't work on first press

1 Answers1