Скрыть / показать контент на всех идентификаторах div с одним и тем же классом

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>