JS source to show/hide divs, didn't work as I expected

Question

I am writing the source code to show/hide divs. If I try to show a new div, however, it is hidden behind the currently shown div.

Here is what I built: http://talkbox.co.il/text.htm

If you try to show 'options' and then 'notific' (or vice versa), you will see that it sometimes doesn't work so well. You will need to click twice for it to work. Why isn't it working so well?

I think maybe the update of this.isMenuOptionsOpen = false; this.isMenuNotificOpen = false; this.isMenuOptionsOpen = false; this.isMenuNotificOpen = false; is causing it. How can I fix this?

---

This is the full source:

<script>
    this.isMenuOptionsOpen = false;
    this.isMenuNotificOpen = false;
    function menuOptions() {
        if (this.isMenuOptionsOpen == false) {
            document.getElementById('menuOptions').style.display = 'block';
            this.isMenuOptionsOpen = true;
            document.getElementById('menuNotific').style.display = 'none';  // close another menu if open
        }
        else {
            document.getElementById('menuOptions').style.display = 'none';
            this.isMenuOptionsOpen = false;
        }
    }
    function menuNotific() {
        if (this.isMenuNotificOpen == false) {
            document.getElementById('menuNotific').style.display = 'block';
            this.isMenuNotificOpen = true;
            document.getElementById('menuOptions').style.display = 'none';  // close another menu if open
        }
        else {
            document.getElementById('menuNotific').style.display = 'none';
            this.isMenuNotificOpen = false;
        }
    }
</script>


<!-- buttons to show/hode the divs-->
<a href="javascript: menuOptions();"> options </a><br>
<a href="javascript: menuNotific();"> notific </a>
<!-- end buttons to show/hode the divs -->


<!-- divs to show/hide -->
<div id='menuOptions' style='width:100px; height:100px; background-color:green; display:none; position:relative; color:black;'>menu options</div>
<div id='menuNotific' style='width:100px; height:100px; background-color:yellow; display:none; position:relative; color:black;'>menu notific</div>
<!-- end divs to show/hide -->

Answer 1

When you open Options then Notific, isMenuOptionsOpen is still set to TRUE, so when you ask to open it, your function try to close it and set isMenuOptionsOpen to FALSE, and finaly a second click open it.

You need to set isMenuOptionsOpen to FALSE when you open Notific.