人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptで表示切替

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

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

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

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript prototype.js あいうえお 記述
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● STRing
●35ポイント
<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


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


2 ● ぱこち
●35ポイント

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

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

スタイルシート(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>
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ