Stack Overflow

HTML

<!DOCTYPE html>
<html>
  <script>
    function myFunction() {
      var elms = document.getElementsByClassName("tw");
      Array.from(elms).forEach((x) => {
        if (x.style.display === "block") {
          x.style.display = "none";
        } else {
          x.style.display = "block";
        }
      })
    }

  </script>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet" type="text/css" media="all">
    <button onclick="myFunction()" , class="back">TW Toggle</button>
  </head>

  <body>

    <div class="article">
      <h3>title</h3>
      <h4>Hi</h4>h4>
      <p>content bla bla</p>
      <blockquote class="tw">this blockquote has "tw" class</blockquote>
    </div>

    <div class="article" , class="tw">
      <h4>this article has "tw" class</h4>
      <h4>content</h4>
      <br>

    </div>

  </body>

</html>

CSS

body {
  color: white;
}
.tw {
  display: none;
}

.article {
  width: 900px;
  background-color: black;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  box-shadow: black 0px 5px 10px;
  text-align: center;
  letter-spacing: 8px;
  font-size: 15px;
  padding-top: 20px;


}

.article p {
  margin: 20px;
  font-size: 15px;


}

h5 {
  font-weight: normal;
}

b {
  color: #703e3e;
  font-weight: normal;

}