用户需要两次单击才能删除具有javascript切换可见性的div块

Question

I am using the following code and it works, somewhat, but in production it requires user to click the link twice. very weird.

Is my code out of date or something? any time you can offer would be appreciated.

js:

    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }

html:

                    <div id="top_min_order_alert">
                        <p>Minimum Order: $5 for carry out orders, $10 for delivery (before tax and delivery fee)</p>
                        <p>Online ordering stops 15 minutes before closing time</p>
                        <p><a href="#" onclick="toggle_visibility('top_min_order_alert');">Ok, Got it.</a></p>
                    </div>

Answer 1

The first time the user clicks the link, e.style.display is equal to an empty string, so the if takes the else branch and e.style.display is set to block , for this reason the div remains visible. Then, when the user clicks the second time, e.style.display is equal to block and it is set correctly to none . To fix it, check if e.style.display is equal to an empty string:

if (e.style.display === '' || e.style.display == 'block')

Here the complete example:

 function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.display === '' || e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } 

 <div id="top_min_order_alert"> <p>Minimum Order: $5 for carry out orders, $10 for delivery (before tax and delivery fee)</p> <p>Online ordering stops 15 minutes before closing time</p> <p><a href="#" onclick="toggle_visibility('top_min_order_alert');">Ok, Got it.</a> </p> </div>