javascript - 使类(class)分别进行

我有两个段落，当我按下“更多信息”按钮时，我希望能够显示更多详细信息。该代码似乎运行良好。但是，当您单击“更多信息”时，顶部和底部段落均会折叠。我希望能够使它们分别折叠。

我该怎么做？

function infobtn() {
  var s = document.getElementsByClassName("info");

  for (var i = 0; i < s.length; i++) {
    if (s[i].style.display === "block") {
      s[i].style.display = "none";
    }
    else {
      s[i].style.display = "block";
    }
  }
}

#paragraph {
  float: left;
  width: 50%;
  height: auto;
  margin: 5% 20% 5% 0%;
  padding: 0% 0% 0% 0%;
}

#paragraph p {
  background: rgba(200, 200, 200, 0.5);
  width: 98%;
  height: auto;
  color: black;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: hidden;
  margin: 0% 1% 5% 0%;
  text-align: center;
}

#paragraph .info {
  width: 100%;
  height: auto;
  display: none;
  float: left;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 10px 10px;
}

#paragraph h4 {
  color: white;
  background: rgba(50, 50, 50, 1);
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1% 0% 1% 0%;
  margin: -4% 0% 0% 0%;
  float: left;
  border-radius: 5px;
}

#paragraph2 {
  float: left;
  width: 50%;
  height: auto;
  margin: 0% 0% 0% 0%;
  padding: 0% 0% 0% 0%;
}

#paragraph2 p {
  background: rgba(200, 200, 255, 0.5);
  width: 99%;
  height: auto;
  color: black;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: hidden;
  margin: 0% 1% 5% 0%;
  text-align: center;
}

#paragraph2 .info {
  width: 100%;
  height: auto;
  display: none;
  float: left;
  overflow: hidden;
  transition: 0.5s ease-in-out;
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 10px 10px;
}

#paragraph2 h4 {
  color: white;
  background: rgba(50, 50, 50, 1);
  width: 100%;
  height: auto;
  text-align: center;
  padding: 1% 0% 1% 0%;
  margin: -4% 0% 0% 0%;
  float: left;
  border-radius: 5px;
}

<div id="paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>
<div id="paragraph2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse neque nisl, gravida vitae tellus a, commodo mattis risus. Pellentesque nec libero maximus, imperdiet justo tincidunt, placerat risus. Cras vitae neque tincidunt, sagittis turpis et,
    tincidunt tortor. Sed sem lectus, suscipit at sollicitudin eget, euismod faucibus ex. Nam dignissim, est sit amet porttitor consectetur, tortor orci placerat augue, varius volutpat sem ante eget velit. Sed eget quam at nulla convallis pulvinar id
    non eros. Pellentesque venenatis lacus at dolor varius, molestie imperdiet ex pretium. Vestibulum scelerisque quis mauris quis posuere. Duis vitae enim non mauris malesuada dictum. Morbi suscipit aliquet leo a maximus. Nunc faucibus ut urna nec rhoncus.
    Proin semper ultricies rhoncus. Nulla efficitur rhoncus sollicitudin. Phasellus ac leo mi. Phasellus odio nulla, posuere ut ullamcorper quis, suscipit a erat. Phasellus sollicitudin iaculis ipsum, pretium mollis massa laoreet ut. </p>
  <h4 onclick="infobtn()"> More info</h4>
  <div class="info">
    <h1> More info...</h1>
  </div>
</div>

最佳答案

更有效的解决方案是使用比JS更多的CSS

单击按钮切换类，并使用CSS兄弟选择器显示/隐藏信息块：

function showMore(el){
  el.classList.toggle('on');
}

.more-content {
  display: none;
}

.more.on ~ .more-content {
  display: block;
}

<div id="paragraph1">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <button class="more" onclick="showMore(this)">more</button>
  <p class="more-content">inventore fugiat aliquid non. Accusantium saepe suscipit, pariatur reprehenderit odio autem velit? Qui voluptate molestias cupiditate totam dolorum architecto inventore! Ad ullam et facilis excepturi</p>
</div>

<div id="paragraph2">
  <p>Qui voluptate molestias cupiditate totam</p>
  <button class="more" onclick="showMore(this)">more</button>
  <p class="more-content">voluptates dolorum placeat eius molestias asperiores iure, sequi laudantium corporis iusto obcaecati perferendis doloribus dolorem odio. Minima, incidunt magnam expedita ratione cumque autem?</p>
</div>