![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHHBUlqNU-kLkyHh2I8AfJfaciLa6ah5zV2Jbuow9TtHl_QO5byPrZ19qgRuckj-rMKWaTWp82Jt10JyrWsOMcktfJ2JU3SX1yPRLIfRcwa2BHUxy4g__5MmZaV7dyme7yNP5sMk24kUw/s1600/tajuk.png)
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.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7tSCuH7IM4A-ct_IVId7b1h6UoouRRnejKflyI45t_dhVI6kamyBCfWKtLT6sjxoAOJ6GdWLxlayMQCLteQcVSjBEZ7cMU_FhMT6WbyoxmxkWWxNvvF9z6X1yxQMdFnXkhGV572VWd2M/s400/contoh.png)
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 .
0 Comments
Terima kasih sudi baca artikel ini. Sila berikan komen anda. Jemput follow blog ini ye!