Soh Tanaka tarafından Css3 ve jQuery kullanılarak hazırlanmış bir akordiyon örneği.  Buradaki örnekte oklar açmış olduğunuz sekmeye bağlı olarak yön değiştirebilme özelliğine sahip. Kapalı olan sekmelerin okları sağa açık olan sekme ise aşağı doğru bakıyor. Sekmeler arasındaki geçiş işlemi sırasında ok işaretleri otomatik yön değiştiriyor. Hangi sekmeye tıklarsanız sekme açıldığında sağa bakan ok ikonu da aşağıya doğru dönüyor.

Uzun bir süre önce SohTanaka adlı websitesi edindiğim bilgiye göre başka biri tarafından çaındığı için internet ortamında Soh Tanaka tarafından hazırlanmış olan örneklere ulaşmak pek mümkün değildi aslında. Bu güzelim örnekleri yayınlamamak sanırım yazık olacaktı. Şimdilik örneği sizinle paylaşmak için demo ve download adreslerini kendi hostuma attım. Gerçi sanmıyorum ama ilerde geliştirici tarafından itiraz olması durumunda mecburen örnekleri kaldırmak zorunda kalacağım.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresi :

<script type="text/javascript" src="jquery-latest.js"></script>

JavaScript :

<script type="text/javascript">
$(document).ready(function(){

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
	if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
		$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
		$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
	}
	return false; //Prevent the browser jump to the link anchor
});

});
</script>

Css :

<style type="text/css">
html {
	overflow-Y: scroll;
}
body {
	font: 10px normal Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.7em;
}
*, * focus {
	outline: none;
	margin: 0;
	padding: 0;
}

.container {
	width: 500px;
	margin: 0 auto;
}
h1 {
	font: 4em normal Georgia, 'Times New Roman', Times, serif;
	text-align:center;
	padding: 20px 0;
	color: #aaa;
}
h1 span { color: #666; }
h1 small{
	font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 0.5em;
	display: block;
	color: #666;
}

h2.acc_trigger {
	padding: 0;	margin: 0 0 5px 0;
	background: url(h2_trigger_a.gif) no-repeat;
	height: 46px;	line-height: 46px;
	width: 500px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
h2.acc_trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
	color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
	margin: 0 0 5px; padding: 0;
	overflow: hidden;
	font-size: 1.2em;
	width: 500px;
	clear: both;
	background: #f0f0f0;
	border: 1px solid #d6d6d6;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px; 
}
.acc_container .block {
	padding: 20px;
}
.acc_container .block p {
	padding: 5px 0;
	margin: 5px 0;
}
.acc_container h3 {
	font: 2.5em normal Georgia, "Times New Roman", Times, serif;
	margin: 0 0 10px;
	padding: 0 0 5px 0;
	border-bottom: 1px dashed #ccc;
}
.acc_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 5px;
	background: #ddd;
	border: 1px solid #ccc;
}
</style>

• Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="container">

	<h2 class="acc_trigger"><a href="#">Sekme ismi 1 </a></h2>
	<div class="acc_container">
		<div class="block">
			<h3>Başlık</h3>
			<a href="#"><img src="img1.gif" alt="" /></a>
			<p>Yazınızı  bu bölüme  ekleyin</p>

		</div>
	</div>

	<h2 class="acc_trigger"><a href="#">Sekme ismi 2</a></h2>
	<div class="acc_container">
		<div class="block">
			<h3>Başlık</h3>
			<a href="#"><img src="img1.gif" alt="" /></a>
			<p>Yazınızı  bu bölüme  ekleyin</p>

		</div>
	</div>

	<h2 class="acc_trigger"><a href="#">Sekme ismi 3</a></h2>
	<div class="acc_container">
		<div class="block">
			<h3>Başlık</h3>
			<a href="#"><img src="img1.gif" alt="" /></a>
			<p>Yazınızı  bu bölüme  ekleyin</p>

		</div>
	</div>

	<h2 class="acc_trigger"><a href="#">Sekme ismi 4</a></h2>
	<div class="acc_container">
		<div class="block">
			<h3>Başlık</h3>
			<a href="#"><img src="img1.gif" alt="" /></a>
			<p>Yazınızı  bu bölüme  ekleyin</p>

		</div>
	</div>	
</div>