クリックで表示/非表示に切り替える

Javascript

2009.01.05

クリックしてテキストを表示したり非表示にしたりします。
DOMによるdisplayプロパティ操作で簡単に実現可能。

用途としては、新着情報やQ&Aなど項目が多いものをタイトルだけの目次にすることでスッキリ見せることができます。
ただ、動きはとてもシンプルで、パッと表示されるだけで、何の動きもありません!
それは今後の課題ですね。

クリックで表示/非表示に切り替える

HTMLにIDを割り振る

HTMLソースは

<h2 id="push">Push!!</h2>
<p id="text">「Push!!」を押しても、ここのテキストエリアを押しても閉じます。</p>

割り当てたIDにJavascriptを設定

htmlで割り当てたh2のid=pushと、pのid=textに対して、javascriptで表示・非表示を設定します。

window.onload = function(){
Text = document.getElementById('text'); // id='text'をText変数に定義
Push = document.getElementById('push'); // id='push'をPush変数に定義
Text.style.display = 'none' // Text変数にstyleを当てる。display: none;
Push.onclick = function(){ // Push変数にクリック後の動作を指定。
Text.style.display = Text.style.display == 'block' ? 'none' : 'block';
// id='text'が display: none; ならクリックすると display: block; になる。 display: block; の場合は逆。
}
Text.onclick = function(){ // id='text'をクリックしても display: none; になる
this.style.display = 'none';
}
}

このままではカーソルがアローなので、リンク設定をします。
別にCSSでもいいのですが、Javascriptのページなので。。。

Push.style.width = '4em';
Push.style.cursor = 'pointer';

動作サンプル

サンプルはこちら
Javascript初心者なので、まだまだ改善の余地があります。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. クリックで表示/非表示に切り替える
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

h2クリックのfunctionを「p#textが非表示なら表示、表示なら非表示にする」にする場合は、
Push.onclick = function(){
Text.style.display = Text.style.display = “block” ? “none” : “block”;
}
「p#textが表示されているときp#textをクリックしたら非表示にする」は
Text.onclick = function(){
this.style.display = “none”;
}
です。

noriさんコメントありがとうございます。
おかげで、開閉式のテキストボックスになりました。

COMMENT PLEASE!!

トラックバック

「クリックで表示/非表示に切り替える」のトラックバックURL
http://web-park.org/javascript/display.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook