单击操作以显示更多信息html、css、javascript

我创建的html和css如下所示：

正如你所看到的，我把这些盒子做成了300px的高度，但是我有更多的信息，这是用

overflow:hidden隐藏的。现在我创建了一个按钮

//html
<a id="show-more" class="show">Show More</a>

/css
.show {
display: block;
background-color: #75868E;
width: 100px;
font-size: 12px;
text-transform: uppercase;
display: inline-block;
margin: 20px auto;
cursor: pointer;
height: 15px;
padding: 10px 0; 
}

这就是javascript

var content = document.getElementByClassName(".model1");
var button = document.getElementById("show-more")

button.onclick = function(){

if(content.className == "open"){
    content.className = "";
    button.innerHTML = "Show More";

} else {
    content.className = "open";
    button.innerHTML = "Show Less";
}

};

但它不起作用。我被卡住了。有人能帮我完成这项工作吗？
您的代码中有一些bug


在CSS中，您将
model1
作为id引用，但在JavaScript中，您可以
将其称为类

getElementByClassName
应该是
getElementsByClassName
，元素后面加一个s。如果您查看浏览器控制台，就会看到此问题。（
ctrl
+
shift
+
i
）

在
GetElementsByCassName
中没有包含
符号，因此应该使用值
modal1
而不是
.modal1

如果您确实使用了
GetElementsByCassName
，则需要指定该类中要影响的元素，否则将影响该类中的所有元素，这意味着单击该按钮将显示越来越多的模态。我使用jQuery，所以我不确定纯JS的替代方案是什么，但您可能想要检测哪个。modal1有一个共享的父级，该父级与单击的按钮相同，或者交替地将哪个数字按钮的属性放在模式上，并将相同的属性放在模式上，并使用该属性将两个元素的行为联系在一起


这可能不是一个完整的bug列表，但这些是我看到的最明显的bug。
如果我只有一个元素，那么它就可以工作。见>

var content = document.getElementByClassName(".model1");
var button = document.getElementById("show-more")

button.onclick = function(){

if(content.className == "open"){
    content.className = "";
    button.innerHTML = "Show More";

} else {
    content.className = "open";
    button.innerHTML = "Show Less";
}

};

But how do i make it show or hide all three elements at the same time when i 
click the button?