استفاده از جاوااسکریپت و کتابخانه های مرتبط با آن نظیر jQuery و MooTools در طراحی سایت بسیار پرکاربرد و شایع است و باعث بهبود رابط کاربری سایت با کاربران خواهد شد. یکی از پرکاربرد ترین اسکریپتهایی که در جاوااسکریپت مورد استفاده قرار میگیرد، نمایش دادن و مخفی کردن عناصر موجود در صفحه است.

در این مطلب از digital98 نوعی از اسکریپت را بررسی خواهیم کرد که با کلیک بر روی لینک (یا دکمه) قسمتی نمایش داده می شود و با کلیک مجدد بر روی همان دکمه، بخش مخفی خواهد شد.

نمایش دادن و مخفی کردن بخشی از صفحه با استفاده از جاوااسکریپت

کد HTML

فرض کنید کد HTML زیر را داریم:

<button onclick="toggle_visibility('foo');">برای نمایش داده شدن لینک کلیک کنید</button>
<div id="foo">بخشی که نمایش داده میشود!</div>

در این کد یک دکمه داریم که با استفاده از مشخصه ی onclick مقدار toggle_visibility(‘foo’) را به آن اختصاص داده ایم. در واقع عبارت foo همان ID بخشی است که قرار است نمایش داده شود و یا مخفی شود. برای همین در سطر بعدی ID را برابر foo قرار دادیم.

کد CSS

در گام بعدی با استفاده از css قسمت مورد نظر یعنی div با آیدی foo را مخفی میکنیم:

#foo{
display:none;
}

کد جاوااسکریپت

حال نوبت به قسمت اصلی یعنی کد جاوااسکریپت میرسد:

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>

کد جاوا اسکریپت باید قبل از تگ <head/> قرار داده شود. در این کد ابتدا یک تابع با نام ()toggle_visibility ایجاد کردیم و با نوشتن عبارت id داخل پرانتز به تابع دستور دادیم تا در html عناصر را بر اساس id آنها جستجو کند.

در سطر بعد متغیری تعریف کردیم و با دستور document.getElementById تعیین کردیم که عنصر باید از طریق Id شناسایی شود. اگر متغیر نمایان باشد، با کلیک آنها مخفی میکنیم (none) و اگر مخفی باشد با کلیک آنرا نمایان میکنیم (block).

نمایش دادن و مخفی کردن قسمتی از صفحه با استفاده از jQuery

در صورتی که در طراحی سایت و یا صفحه ی مورد نظر از کتابخانه ی jQuery استفاده کرده باشید، میتوانید بجای استفاده از کدهای جاوااسکریپت به صورت جداگانه (قسمت قبل)، از کدهای مخصوص jQuery بهره بگیرید:

<script type="text/javascript">
$("button").click(function() {
$("#foo").toggle();
});
</script>

توجه داشته باشید که برای استفاده از کدهای jQuery باید ابتدا کتابخانه ی مربوط به آن تعیین و اجرا شود در غیر اینصورت قطعه کد بالا (بخش jQuery) عمل نخواهد کرد.

نمایش و مخفی کردن متن با جاوا اسکریپت

یکی از راه های پویا کردن صفحات وب استفاده از جاوااسکریپت است. در اینجا یکی از افکت های جاوااسکریپت را با هم بررسی می کنیم. توسط این اسکریپت می توانید یک لینک را نمایش بدهید به طوری که با کلیک بر لینک بدون اینکه صفحه دوباره بارگذاری (Load) شود متن مورد نظر شما نمایش داده شود. این کار برای سرعت بخشیدن به صفحات و همچنین زیبایی و پویایی فرم های html کمک زیادی می کند و یا حتی می توانید در لبه ها (Tab) از این افکت استفاده کنید

.<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>اسکریپت نمایش متن با لینک</title>
<script type="text/javascript" language="javascript">
function showStuff(id){
document.getElementById(id).style.display='block';}
function hideStuff(id){
document.getElementById(id).style.display='none';}
</script>
</head><body style="font-family:tahoma;direction:rtl;" >
<a href="#" onclick="showStuff('answer')" > نمایش متن </a><br />
<span id="answer" style="display:none;return:false;" > متن مورد نظر که نمایش داده میشود
<br />
<a href="#" onclick="hideStuff('answer')" > پنهان کردن متن</a></span>
</body>

توضیح کد بالاست!

ابتدا توسط اسکریپت یک تابع (function) ایجاد می کنیم و نام آن را showStuff قرار می دهیم و مشخص می کنیم که با مشخصه ی id فراخوانی شود و وظیفه ی تابع را هم توسط کدی که بین { } قراردارد تعیین می کنیم.

همچنین یک تابع هم برای مخفی کردن تعیین می کنیم و نام آن را hideStuff قرار می دهیم. توجه کنید در جاوااسکریپت بزرگ و کوچک بودن حروف اهمیت دارد یعنی stuff با Stuff یکسان محسوب نمی شوند و با هم تفاوت دارند. پس به حروف بزرگ و کوچک کد بالا دقت کنید.

در هردو تابع با دستور getElementById تعیین می کنیم که بخشی را که قصد داریم روی آن، این کدها اعمال شود توسط id همان بخش تعیین شود.
حالا به سراغ قسمتی میرویم که توسط کاربر قابل مشاهده است.

در لینک مورد نظر از مشخصه ی onClick استفاده کردیم تا به محض اینکه کاربر بر روی لینک کلیک کرد تابع showStuff فراخوانی شود و قسمتی که با id answer مشخص شده را پیدا کند. در سطر بعد id متن مورد نظر یا هرچیز دیگری را که می خواهیم نمایش بدهیم برابر answer قرار می دهیم و با استفاده از خصوصیت css آن را در حالت معمولی مخفی می کنیم ( یعنی display:none ).

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