memudahkan menstruktur template.

hardian.js

/*
	Hardian.js
	Memudahkan kami untuk mestruktur template.
*/
var nav = {
	pengaturan: {
		waktuTransisi: 500
	},
	init: function(){
		var aku = this;
		$("[data-role=\"navigator\"]").on("click", function() {
			console.log("clicked");
			var idnya = $(this).data("target");
			$("[data-id=\"" + idnya + "\"]").slideDown(aku.pengaturan.waktuTransisi);
			$("[data-id]").each(function(index, element) {
				if($(element).data("id") != idnya)
					$(element).slideUp(aku.pengaturan.waktuTransisi);
			});	
		});
	}
}
jQuery(document).ready(function() {nav.init();});

index.html

<!-- dari kodemu: -->
<div id="header">
	<div id="navigator">
		<a data-target="home2" title="Home" data-role="navigator">Home</a>
		<a data-target="article2" title="Article" data-role="navigator">Article</a>
		<a data-target="gallery2" title="Gallery" data-role="navigator">Gallery</a>
		<a data-target="about2" title="About Us" data-role="navigator">About</a>
	</div>
	<div id="logo">
	</div>
</div>
<div data-id="home2">
 ...
</div>
<div data-id="gallery2">
 ...
</div>

...

<!-- 
  pada link, anda hanya perlu menuliskan targetnya (data-id) dari elemen yang ada. Jangan lupa tambahkan data-role="navigator" untuk mengaktifkan widgetnya.
  setelah itu kau bisa dengan leluasa buat semua div dengan data-id sebagai target dari navigatormu... semuanya berjalan otomatis tanpa harus memprogram tombolnya satu satu.
  
-->