بعضی از plugin های jQuery ساده و مفید هستند . نمونه اش این Accordion Content script است که در صفحه نمونه کارها استفاده کردم .
برای استفاده از این script کافی است دو فایل جاوااسکریپت مربوط به jQuery و این plugin را در مسیر مورد نظر قرارداده و آنها را در header فراخوانی کنید .
سپس دو کلاس برای css که مربوط به header هر کدام از آیتم ها است را اضافه کنید .
.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}
.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}
البته اسم کلاس ها را تغییر دهید بهتر است !
از تابعی با نام ddaccordion.init استفاده کرده است که به عنوان initializer به کارگرفته شده و نام کلاسهایcss و اندیس اولین آیتم را و دیگر تنظیمها را مقدار دهی می کند .
در html برای عنوان ها (آنهایی که کلیک می شوند) از المان div یا heading ها (و دیگر المان ها!) استفاده می شود و برای متنِ آن عنوان، یک div که بتوان دیگر المان ها را درونش جای داد به کار گرفته شده . مانند زیر :
<h3 class="mypets">Dogs</h3>
<div class="thepet">
doggy content here...
</div>
توضیحات کامل در این صفحه نوشته شده است .