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

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

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

HTMLにIDを割り振る

HTMLソースは

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

割り当てたIDにJavascriptを設定

htmlで割り当てたh2のid＝pushと、ｐの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. クリックで表示/非表示に切り替える