Javascript CSS-显示或隐藏DIV时页面变为空白

我有一个javascript函数，可以通过单击名为

Show/Hide search form

的链接来调用该函数，以显示或隐藏搜索表单：

<script>
function hide_show_form_search() {
    var x = document.getElementById("searchform");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>  

---

如何解决此问题？

我不确定是否可以回答以下问题：当您单击“显示/隐藏”链接时，为什么您的整个页面会消失

不过，我可以提出另一种解决办法：

---

使用

显示/隐藏搜索表单

调用隐藏/显示功能

请参阅如何创建一个。例如：为了触发这一活动，我们到底应该在你庞大的代码笔中做些什么？你的代码笔似乎没有包含一个名为

hide\u show\u form\u search

…你的事件侦听器是什么样子的？@cale\b我已经用最少的术语编辑了模板，CSS非常长，但由于我不是专家，我不知道CSS的哪一部分与我的问题相关。我还能做什么？真的，读这篇文章。把注意力集中在最低限度上。你不需要所有的HTML，也不需要任何CSS，所以把它归结为重新创建问题所需的最小部分。@Frish-它被称为

-这是问题的一个重要部分，我相信…我已经用你的代码替换了链接的代码，问题已经解决了。最好不要使用a元素，因为它可以推断导航，在许多浏览器中，

href=“#”

可能会滚动到页面顶部。考虑使用类似样式的按钮或跨度（<代码>文本修饰：下划线；光标：指针< /代码>等）。RobG，我添加了以下按钮，请告诉我这是否是正确的过程：

Search

CODEPEN: