يمكن للأكورديون أن يكون مفيدا بشكل رائع لتنظيم محتوى جيد وذلك عند تصميمه وتنفيذه مع أخذ قابلية الاستخدام في الاعتبار. بما أن الكثيرين قد وجدوا الدرس الذي قمت بشرحه والخاص بالـ toggle مفيدا، فأرغب باستعراض الطريقة التي قمت بواسطتها بعمل أكورديون من الصفر.

الأساس – HTML

شفرتنا بسيطة جدا وهي عبارة عن وسم <h2> متبوع مباشرة بوسم <div>. سيكون وسم الـ <h2> عبارة عن ترويسة عنصر الأكورديون وسنستخدم هذا ليكون الـ trigger الخاص بنا باستخدام الـ jQuery في حين سيكون وسم <div> هو ما نقوم بتحريكه إلى الأعلى والأسفل وذلك لعرض محتوياته.

<h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
<div class="acc_container">
<div class="block">
	<!--Content Goes Here--></div>
</div>

التنسيق باستخدام الـ CSS

هناك أمران يجب الانتباه إليهما في التنسيق.

• استخدام عرض ثابت في .acc_container (لا يمكن له أن يكون بصيغة % أو em) فهذا يمنع أي مشكلة في الـ JQuery حيث يقوم بالقفز أوالتخطي حين ينزلق الأكورديون للأسفل (حين يصل القاع مباشرة). قمت بالبحث عن حل لهذه المشكلة ووجدت البعض ينصح بتحديد الطول عند استخدام الـ JQuery ولكني وجدت الحل الذي طبقته أكثر فعالية وبساطة.
• أضف padding لوسم الـ div المضمّن في .acc_container حيث يمنع هذا مشكلة أخرى من الظهور حيث يتم عمل animation للـ padding عندما فتح وإغلاق الأكورديون.

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;
}

الخطوة الثالثة: تجهيز الـ jQuery

للأشخاص الذين ليسوا معتادين على استخدام مكتبة الـ Jquery، تفقد موقعها أولا وخذ فكرة عن كيفية عمل هذه المكتبة. كما قمت بمشاركة بعض الحيل التي صادفتها والتي يمكنك الاطلاع عليها أيضا.

الخطوة الابتدائية- قم باستدعاء ملف الـ jQuery

يمكنك أن تختار بين تحميل ملف الـ jQuery من الموقع الخاص به أو بإمكانك استخدام هذا الملف الموجود على جوجل:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>

قم بفتح وسم <script> جديد بعد السطر الذي قمت فيه باستدعاء مكتبة الـ jQuery وابدأ شفرتك البرمجية باستخدام الحدث $(document).ready. يسمح هذا الحدث لكود الـ jQuery بالعمل في نفس اللحظة التي يصبح فيها الـ DOM جاهزا للمعالجة. الكود الذي ستقوم بكتابته في الخطوات القليلة التالية يجب أن يكون موجودا داخل الحدث التالي:

$(document).ready(function() {
	//Code goes here
});

الخطوة الرابعة: إطلاق الكود إلى الحياة- jQuery

يحتوي السكريبت التالي على تعليقات توضح أحداث الـ jQuery التي سيتم تنفيذها.

//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 "active" state and slide up the immediate next container
		$(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
	}
	return false; //Prevent the browser jump to the link anchor
});

طريقة العمل- ما الذي يحدث هنا؟

• أولا قم بضبط الإعدادات الأساسية: قم بفتح الأكورديون الأول وأضف الحالة الفعالة.
• عند الضغط: قم بمعرفة إن كان عنصر الأكورديون الذي تم الضغط عليه مفتوحا أو مغلقا.
• إذا ما كان العنصر الذي تم اختياره “مختفيا” (مغلقا) فإذن..
• لكل عناصر الأكورديون- قم بإزالة كل الأصناف “الفعالة” وعمل slide up لكل العناصر التالية في .acc_container
• عند الضغط على $(this)، قم بإضافة “الحالة الفعالة” وعمل slide down للعنصر التالي في .acc_container