TUTORIAL : Collapsible

Tutorial kali ni adalah Collapsible. Collapsible ni seakan sama je dengan Accordian Tab tu. Cuma dia lebih sikit tab dia. Contoh macam kat bawah ni.

A Collapsible:

Dalam ni boleh letak text atau code.

Collapsible Set:

Dalam ni boleh letak text atau code.

Dalam ni boleh letak text atau code.

Dalam ni boleh letak text atau code.

1. Layout >HTML/Javascript > copy dan paste code dibawah ni ye.

<style type="text/css">
.collapsible {
  background-color: #E4DAC2;
  color: #333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.active, .collapsible:hover {
  background-color: #E9CCB1;
}
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #EFEEEE;
}
</style>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Dalam ni boleh letak text atau code.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Dalam ni boleh letak text atau code.</p>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Dalam ni boleh letak text atau code.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Dalam ni boleh letak text atau code.</p>
</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.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display= "block";
    }
  });
}
</script>

2. Yang Zati bold kan tu, korang boleh tukar korang punya tajuk atau link atau text atau apa je yang korang nak letak.

3. Warna boleh tukar ikut kesukaan sendiri. SELAMAT MENCUBA!