Toggle (HTML, CSS, JS)

<div dir="ltr" style="text-align: left;" trbidi="on">
  <div class="separator" style="clear: both; text-align: center;">
    <a href="https://1.bp.blogspot.com/-YUuBjtJu-ls/X0ZY88fjJAI/AAAAAAAABjc/GPl_tFgVQewkuCV0edzJhEybtvWuUYVMgCLcBGAsYHQ/s1600/Aplikasi%2BWeb-min.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Membangun aplikasi berbasis web" border="0" data-original-height="315" data-original-width="560" src="https://1.bp.blogspot.com/-YUuBjtJu-ls/X0ZY88fjJAI/AAAAAAAABjc/GPl_tFgVQewkuCV0edzJhEybtvWuUYVMgCLcBGAsYHQ/s1600/Aplikasi%2BWeb-min.png" title="PlajariKode - Membangun aplikasi berbasis web" /></a>
  </div>
  <div class="separator" style="clear: both; text-align: center;">
    <br />
  </div>
  <html>
    <head>
      <style>
        .collapsible {
          background-color: #0cbac1;
          color: white;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
        }

        .active, .collapsible:hover {
          background-color: #02989e;
        }

        .content {
          padding: 0 18px;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.2s ease-out;
        }
      </style>
    </head>
    <body>
      <button class="collapsible">Aplikasi Pembayaran SPP</button>
      <div class="content">
        <br />
        Part 1 :
        <a href="https://www.plajarikode.com/2020/02/source-code-aplikasi-pembayaran-spp-1.html" target="_blank">Pembuatan Database dan Login</a><br />Part 2 :
        <a href="https://www.plajarikode.com/2020/03/source-code-aplikasi-pembayaran-spp-2.html" target="_blank">Pembuatan Halaman Admin</a><br /
        <br />
      </div>
      <button class="collapsible">
        Aplikasi Peminjaman Barang
      </button>
      <div class="content">
        <br />
        Part 0 :
        <a href="https://www.plajarikode.com/2020/01/membuat-aplikasi-inventaris-database.html" target="_blank">Pembuatan Database beserta Tabelnya</a><br />Part 1 :
        <a href="https://www.plajarikode.com/2020/01/aplikasi-inventaris-php-mysql-part-1.html" target="_blank">Desain Login Form dan Proses Login</a><br />
<br />
      </div>
      <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.maxHeight){
              content.style.maxHeight = null;
            } else {
              content.style.maxHeight = content.scrollHeight + "px";
            }
          });
        }
      </script>
    </body>
  </html>
</div>