2006.02.03

HTMLでの明細の表示非表示

Webサイトなどでよく「+」をクリックすると「-」になり、
明細部が表示されるようなHTMLを見かけます。
これを実際作成するには、Javascriptで明細部の表示、
非表示を制御し、かつ明細部表示時は「-」に、
非表示時は「+」にという制御をすることです。

サンプル
------------------------------------------------------------------------
function mzDisplayChange( rsElementName, roElement ) {
var s1;
var s2;
var s3;

if ( '' == document.getElementById(rsElementName).style.display ) {
document.getElementById(rsElementName).style.display= 'none';
s1= '+';
} else {
document.getElementById(rsElementName).style.display= '';
s1= '-';
}

s2= roElement.innerText.substr(0, 1);
if ( ('+' == s2) || ('-' == s2) ) {
s3= roElement.innerText.substr(1);
} else {
s3= roElement.innerText.substr(0, roElement.innerText.length - 1);
}

roElement.innerText= s3 + s1;
}
------------------------------------------------------------------------

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

photo
mineo