Javascriptで表示切替


html内の一部をjavascriptで表示、非表示の切り替えをしたいと思います。
その際に、消した部分は上に詰め、戻したら、また広がるものとします。

この場合、どの表示記述すればいいのでしょうか?
prototype.jsとか使ったら楽でしょうか?
<div id="display_area_1">
あいうえお<br /><br /><br /><br /><br /><br /><br /><br />わおん
</div>

このような場合で考えています

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2007/01/19 00:37:40
  • 終了:2007/01/20 09:57:34

回答(2件)

id:STRing No.1

STRing回答回数351ベストアンサー獲得回数362007/01/19 01:48:31

ポイント35pt
<p onClick="javascript:document.getElementById('display_area_1').style.display = (document.getElementById('display_area_1').style.display != 'none' ? 'none' : 'block');">Click</p>

<div id="display_area_1">
あいうえお<br /><br /><br /><br /><br /><br /><br /><br />わおん
</div>

こんな感じに一行で@Firefox&IE6


検索語では三項演算子辺りかな?

id:pacochi No.2

ぱこち回答回数247ベストアンサー獲得回数1132007/01/20 01:44:00

ポイント35pt

スタイルのデフォルト値を取得するのが面倒なので、クラス名で判断するようにしています。

表示 / 非表示以外にも色々使い回せて後々楽ですよ。

スタイルシート(CSS)部分

div.active{display:block;}
div.inactive{display:none;}

スクリプト(JavaScript)部分

function disp_toggle(disp_id) {

	with (document.getElementById(disp_id)) className = (className == "active") ? "inactive" : "active";

}
<p><a href="javascript:disp_toggle('display_area_1');">表示 / 非表示</a></p>
<div id="display_area_1" class="active">
あいうえお<br /><br /><br /><br /><br /><br /><br /><br />わおん
</div>

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません