OnClick 事件隐藏和切换页面部分

Question

我创建了两 (2) 个部分。我想在默认情况下隐藏一个部分，其下方有一个显示“显示更多”的按钮。

类似这样的内容--- (https://www.livermoretreeremoval.com/tree-service-ulmar) 在“Ulmar Tree Services Top Sights”部分下。

如果单击该按钮，则应显示隐藏的部分，并且按钮文本应更改为“少显示”。

如果再次单击按钮，可见部分应再次隐藏，按钮文本应显示“显示更多”。

因此，隐藏时，按钮显示“显示更多”，而可见时，按钮显示“显示更少”。

下面是我的 JavaScript：

`

function toggleBlock() {
// get the block
    var myBlock = document.getElementById(‘service-area-two’);

// get the current value of the block’s display property
    var displaySetting = myBlock.style.display;

// also get the block button, so we can change what it says
    var blockButton = document.getElementById(‘Show More’);

// now toggle the block and the button text, depending on current state
    if (displaySetting == ‘block’) {
// block is visible. hide it
    myBlock.style.display = ‘none’;
// change button text
    blockButton.innerHTML = ‘Show Less’;
}
else {
// block is hidden. show it
myBlock.style.display = ‘block’;
// change button text
blockButton.innerHTML = ‘Show More’;
}
}

`

部分 ID：service-area-two 按钮名称是：ToggleButton

我知道我做错了很多事情。

我怎样才能让这个按钮工作？

Answer 1

所以对于按钮，显示更多和显示更少不起作用是我的理解。我认为这里的错误是innerHTML。 innerHTML 表示块内的实际 HTML，例如：

button.innerHTML = '<img src="---'">'

最后，将innerHTML 更改为innerText。

Answer 2

使用隐藏属性。
所以：

<div hidden id="service-area-two">
    // content
</div>
<button id="Show More" onclick="toggleBlock()">Show more</button>

JavaScript 逻辑是这样的：

function toggleBlock() {
    var myBlock = document.getElementById("service-area-two");

    var blockButton = document.getElementById("Show More");

    if (myBlock.hidden) {
        blockButton.innerHTML = "Show Less";
        myBlock.hidden = false;
    } else {
        blockButton.innerHTML = "Show More";
        myBlock.hidden = true;
    }
}