Expand / Collapse Paragraph

Yaaahhh, daripada nganggur posting iseng2an ah … 🙂

Hemhh,,, kali ini aku mau bahas tentang Toogle Paragraph atau Expand / Collapse Paragaraf, atau bisa juga disebut Paragraf yang kembang kempis … hehehehe …

Pertama buat dulu javascript lalu taruh script ni di bagian head

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function toogle(a){
var b = document.getElementById(a);
if(!b) return true;
if(b.style.display == "none"){
b.style.display = "block";
}else{
b.style.display = "none";
}
return true;
}
function toogle(a){ var b = document.getElementById(a); if(!b) return true; if(b.style.display == "none"){ b.style.display = "block"; }else{ b.style.display = "none"; } return true; }
function toogle(a){
	var b = document.getElementById(a);
	if(!b) return true;
	if(b.style.display == "none"){
		b.style.display = "block";
	}else{
		b.style.display = "none";
	}
	return true;
}

Nah, sekarang kita buat contoh paragrafnya, ni paragraf taruh di bagian body yaaa …

<input onclick="return toogle('paragraf');" type="button" value="lihat full" />
<div id="paragraf" style="display:none;">Hahahaha, ini gua</div>

Keterangannya, onclick=”return toogle(‘paragraf’);” , ini maksudnya kita panggil fungsi javascript:toogle. Nah fungsi toogle tadi mengontrol paragraf yang id nya paragraf . Yang di kontrol yaitu <div id=”paragraf” . Begitu … Udah gitu coba dah di klik button nya, pasti paragrafnya ilang muncul ilang muncul … hehehe kayak Hantu.

Udah ah, sekian …

HTML 5 Video

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya :

  • section serupa seperti h1-h6.
  • article bisa berupa entri blog atau tulisan konten.
  • aside menyajikan konten pelengkap.
  • header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.
  • footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
  • dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.
  • yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.

Dan kali ini aku bahas tentang Embed video tanpa flashplayer, cukup pake HTML 5 Tag Element aja! Continue reading