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

[elhamirani]

درود
من یک دکمه دارم میخوام وقتی کلیک کنم یک رویداد رخ بده دوباره یک کلیک دیگه کردم یک رویداد دیگه رخ بده مانند این کد

#text1 {width:100px;
height:100px;
overflow:hidden;
}


<div id="text1">Action Center lists important messages about security and maintenance settings that need your attention. Red items in Action Center are labeled Important, and indicate significant issues that should be addressed soon, such as an outdated antivirus program that needs updating. Yellow items are suggested tasks that you should consider addressing, like recommended maintenance tasks.

</div>

function matn (){

document.getElementById("text1").style.height="auto";
}

من می خوام متن پیشفرض کوتاه باشه وقتی روی دکمه کلیک شد متن بلند نشون بده و بر عکس
با سپاس فراوان

[Javidhb]

1. بهتره متن رو بجای div توی p بزارید.
2. بهتره برای اینجور کارا (دستکاری DOM) از jQuery استفاده کنید. (میشه توی یه خط همه این کارا رو کرد!)
3. توی css اون important! هم برای override کردن خاصیت height هست.

css


#text1 {
width:100px;
height:100px;
overflow:hidden;
}
.matnKamel{
height: auto !important;
}


js


var btn = document.getElementById('btn'); //انتخاب دکمه
var myDiv = document.getElementById('text1'); //انتخاب متن

//اجرای تابع با کلیک بر روی دکمه
btn.onclick = function(){
handleButton(this);

matn(myDiv);
}

/*
* تغییر ارتفاع با اضافه یا حذف کلاس مورد نظر
*/
function matn (element){
var nameOfAllClasses = element.className || ''; //در صورت داشتن، گرفتن اسم همه کلاسهای المنت و اگر نه، رشته خالی
var searchForClass = nameOfAllClasses.indexOf('matnKamel'); //جستجوی بین اسم کلاسها

if(searchForClass >= 0) //اگه کلاس مورد نظر ما توشون بود
{
//حذف کلاس
nameOfAllClasses = nameOfAllClasses.replace('matnKamel', '');
}else{
//اضافه کردن کلاس
nameOfAllClasses += 'matnKamel';
}

//اضافه کردن به المنت
element.className = nameOfAllClasses;
}


/*
* مدیریت نوشته دکمه
*/
function handleButton(element)
{
if(element.innerHTML == 'show'){
element.innerHTML = 'hide';
}else{
element.innerHTML = 'show';
}
}


دمــــــــو (http://jsfiddle.net/fsuA5/)