javascript toggle doesn't work on first press

March 28, 2022

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!

>Solution :

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>