html code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  background-color: inherit;
}
.content {
  display: none;
  overflow: hidden;
}
</style>
</head>
<body>

<p>Collapsible Set:</p>

<span class="collapsible">(1) JGBs rallied following Kuroda's dovish presser : JGBs rallied following Kuroda's dovish presser that saw the BoJ joining ranks with the Fed and ... </span>
<span class="content">
  <p>the ECB and signalled the willingness to deliver further easing if necessary. The 10- year JGB rate fell back -3.6 bp to -0.180% and 10- year Treasury yields extended their slide to now 1.987%, down -3.6 bp on the day. The BoE has remained the outlier among central banks...</p>
</span>

<br/><br/>
<span class="collapsible">(2) JGBs rallied following Kuroda's dovish presser : JGBs rallied following Kuroda's dovish presser that saw the BoJ joining ranks with the Fed and ... </span>
<span class="content">
  <p>the ECB and signalled the willingness to deliver further easing if necessary. The 10- year JGB rate fell back -3.6 bp to -0.180% and 10- year Treasury yields extended their slide to now 1.987%, down -3.6 bp on the day. The BoE has remained the outlier among central banks...</p>
</span>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>