تصور کنید محتوای بخشی از وبلاگ یا سایتتان، بسیار زیاد یا به عبارتی طولانی شده است. مثلا آرشیوی چند ساله دارید که با گذشت زمان، به تعداد ماه های آن اضافه شده است و یک شکل طویل به خود گرفته است. به نظر من که کمی زشت می کند ظاهر سایت یا وبلاگ را.

می خواهیم با کمک جی کوئری، کاری کنیم که وقتی روی چیزی مثل “آرشیو” کلیک کردیم، آرشیو وبلاگ نمایش داده شود یا به اصطلاح باز شود و اگر دوباره روی همان کلیک کردیم، بسته و مخفی شود. البته روشی که قرار هست یاد بگیریم را می توانید برای کارهای مختلف استفاده کنید که یکی از آن همینی هست که گفتم. همان آرشیو و این صحبت ها…

مثل همیشه ابتدا اگر کتابخانه ی جی کوئری را ندارید، آخرین نسخه ی آن را از اینجا دریافت کنید (اگر نشد از اینجا بگیرید).

1. جی کوئری

کتابخانه ی جی کوئری را به صفحه اضافه می کنیم (در قسمت head):

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

کدهای زیر را در قسمت head قرار دهید. می بینید چقدر ساده و کوچولو است؟ :)

<script type="text/javascript">
$(document).ready(function(){
$("#toggle-content").hide();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next("#toggle-content").slideToggle("slow");
});
});
</script>

2. اچ تی ام ال

کدهای اچ تی ام ال زیر را قرار دهید:

<h2 class="trigger" id="title-trigger">نمایش / مخفی</h2>
<div id="toggle-content">
<ul>
<li>July 2009</li>
<li>June 2009</li>
<li>May 2009</li>
</ul>
</div>

یک گزینه گذاشتیم برای باز و بسته کردن و یک لیست هم درست کردیم به عنوان آرشیو.

3. سبک دهی – سی اس اس

حالا دستورات سی اس اس زیر را هم اضافه می کنیم:

.trigger {
cursor: pointer;
}
#toggle-content {
overflow: hidden;
}

نکته ای که مورد توجه است این است که اگر می خواهید درحالت پیش فرض، محتوا نمایش داده شود، باید در ابتدای اسکریپت:

$("#toggle-content").hide();

دستور hide را به show تغییر دهید و همینطور برعکس، اگر می خواهید در حالت پیش فرض، محتوا مخفی باشد، hide بگذارید.
خب تمام شد. حالا دیگر یاد گرفته اید از این افکت در طراحی های خود استفاده کنید :)

می توانید نمونه ی این افکت را ببینید و همچنین یک مثال کامل از این افکت را دریافت کنید: