Javascript 显示：隐藏和阻止

我正在尝试在一个页面上创建一个登录帐户，每个页面上都有一个。 但是，当你点击“登录”或“创建帐户”按钮时，它必须隐藏对方的帐户

到目前为止，我已经试过了，但没有成功

    <script>
        var toggle = function() {
        var mydiv1 = document.getElementById('leftContent');
        var mydiv3 = document.getElementById('leftTitle');

            mydiv2.style.display = 'hidden';
            mydiv4.style.display = 'hidden';
            mydiv3.style.display = 'block';
            mydiv1.style.display = 'block';
        }

        var toggle2 = function() {
        var mydiv2 = document.getElementById('leftContent2');
        var mydiv4 = document.getElementById('leftTitle2');

            mydiv2.style.display = 'block';
            mydiv4.style.display = 'block';
            mydiv3.style.display = 'hidden';
            mydiv1.style.display = 'hidden';
        }
    </script>

var toggle=函数（）{
var mydiv1=document.getElementById（'leftContent'）；
var mydiv3=document.getElementById（'leftTitle'）；
mydiv2.style.display='hidden'；
mydiv4.style.display='hidden'；
mydiv3.style.display='block'；
mydiv1.style.display='block'；
}
var toggle2=函数（）{
var mydiv2=document.getElementById（'leftContent2'）；
var mydiv4=document.getElementById（'leftTitle2'）；
mydiv2.style.display='block'；
mydiv4.style.display='block'；
mydiv3.style.display='hidden'；
mydiv1.style.display='hidden'；
}

MyDiv等于4个Div，每个主题有2个“登录”和“创建帐户”。 你会说，为什么是4而不是2，因为上面的标题也有2个不同的div

我希望你们能帮我：）

---

我不介意尝试完全不同的东西，但我希望远离jquery，保持它@纯js。

使用

显示：无

或

---

然后它会得到工作

它应该是

可见性：隐藏或
显示：无
和两者做完全不同的事情，
hidden
将保留
可见性的空间：hidden元素，而
显示：无习惯
style.display = 'none'