TUTORIAL : According Tab Menu

Hai korang! Malam ni Zati rajin nak bagi tutorial. Alang-alang tengah free ni kan, lagi pun tak tahu nak update apa, so kita bagi tutorial je eh. Accordian Tab Menu ni fungsi dia bagi nampak kekemasan dalam sesebuah blog.

Korang boleh tengok contoh macam dalam sidebar blog Zati tu, tu salah satu contoh nya. Okay, jum tengok tutorial nya.

1. Layout > HTML/Javascript > Copy dan Paste code dibawah ni, dalam HTML tu.

<style type="text/css">
.zatiaccordion {
  background-color: #a3979a;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-weight:bold;
  letter-spacing:2px;
  font-family:'Quicksand',sans-serif;
}
.zatiactive, .zatiaccordion:hover {
  background-color: #807175;
}
.zatipanel {
  padding: 0 18px;
  display: none;
  background-color: #e1d8d9;
  overflow: hidden;
}
</style>
<button class="zatiaccordion">TAJUK</button>
<div class="zatipanel">
  <p>Kat sini korang boleh tulis apa2 macam notes ke, atau nak masukkan gambar atau apa2 link pon boleh.</p>
</div>

<button class="zatiaccordion">TAJUK</button>
<div class="zatipanel">
  <p>Kat sini korang boleh tulis apa2 macam notes ke, atau nak masukkan gambar atau apa2 link pon boleh.</p>
</div>

<button class="zatiaccordion">TAJUK</button>
<div class="zatipanel">
  <p>Kat sini korang boleh tulis apa2 macam notes ke, atau nak masukkan gambar atau apa2 link pon boleh.</p>
</div>

<script type="text/javascript">
var acc = document.getElementsByClassName("zatiaccordion");
var i;

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

2. Korang boleh ubah warna ikut kesukaan korang , dan letak Tajuk dan Text .