如何使用javascript隐藏“单击此处显示更多”按钮

我试图做一个简单的任务，使文本可以点击显示更多的文本。就像一个按钮

<div 
onclick="document.getElementById('bio_1').style.display = document.getElementById('bio_1').style.display == 'none' ? 'block' : 'none';">
<h1>More</h1>
<div id="bio_1" style="display: none;">Member bio...</div>
</div>

更多
会员简历。。。

工作演示： 我想做的是，当有人点击“更多”按钮时，它将显示文本，并在底部显示一个隐藏按钮。我确实对javascript缺乏经验，但我能理解它。谢谢大家。

为“更多”和“更少”创建两个处理程序（去掉内联函数-它们很难阅读，不适合编写冗长的代码）

小提琴：

• 不要使用内联事件处理程序。（
  ）
• 使用

  addEventListener

  附加事件，这使您可以在不丢失原始事件侦听器的情况下自由添加更多事件侦听器，并为事件冒泡和事件包装提供了灵活性
• 使用命名函数作为参数

---

另外，我知道你用了三元if。作为警告，当您需要嵌套的ifs时，不要使用它。

如果我们可以使用一个dom元素，为什么还要创建另一个dom元素呢？我想-我想我应该创建2个，因为“Less”按钮应该位于文本的底部。AFAIK，这样的切换按钮应该在状态更改后保留在一个位置，以提供更好的用户体验。我明白为什么你说不使用内联。我想我之所以使用内联是因为我在wordpress页面中使用了这段代码，除非我将其内联，否则它不会做任何事情。关于如何在页面中实现它的任何指导原则。本页仅供参考。这一部分是艺术贡献者。你可以在第四个人简历上看到，我会把脚本放在一个文件中，然后用页面上已经存在的html调用它吗。

document.getElementById("more").onclick = function() {
    document.getElementById("bio_1").style.display = "block";
    document.getElementById("less").style.display = "block";

    this.style.display = "none";
}

document.getElementById("less").onclick = function() {
    document.getElementById("bio_1").style.display = "none";
    document.getElementById("more").style.display = "block";

    this.style.display = "none";
}