１つめのボックス
一つめのボックスに見えているけれどもこれはhtml上２つめのボックス。本当の１つめは0px表示で見かけ上ないことになっているだけ。
ちなみにこのjavascriptの説明はhttp://www.spiral-records.com/psts/2008/10/javascriptmoofx.htmlに記載しているので、良かったらみてみてください。
3つめのボックス
Suspendisse accumsan velit at dui tristique consectetuer. Quisque vitae felis ac arcu dignissim facilisis. Quisque ullamcorper. Cras molestie, elit vel blandit mattis, eros metus tempus tortor, id lobortis sem nunc eget dolor. Nullam dui. Aenean justo. Curabitur ullamcorper, libero eu faucibus ultricies, ipsum arcu interdum tellus, eget tempus augue mauris nec purus. Donec a pede nec tortor venenatis bibendum. Nunc quis erat ac augue rhoncus dictum. Nullam id augue at augue iaculis posuere. Nulla volutpat facilisis quam.
The Fourth Box
タブ切り替えのjavascriptで今制作中のサイトで利用するのに完璧なものがなかったので、
moo.fxを利用したタブのソース（http://www.nyokiglitter.com/tutorials/tabs.html）を改良して作った。
1. 動きがあること
2. 最初は用意されたタブが開いていない
3. タブを閉じることができる
以上が必須要件。
1は今回の元ソースが個人的には最適な動作をしてくれていたのでほとんどいじっていない。
2と3は探したけれども、これがない。
moo.fxのスクリプトとcssおよびhtmlの関係を見ていると2と3を実装できそうな気配があったのでチャレンジしたところ、完成！
以下が今回作成したデモです。
http://www.spiral-records.com/psts-lib/tabaccordion081027/tabbed.html
詳細は下記の通り。
１ ちょっと変則的だが、一つ目のタブを0pxで見えなくして、タブの中身も同じく0pxにする。
タブのcssである「tab」とタブの中身の「box」をコピペし改良したのが以下のもの。
.tab_no{
float: left;
height: 0px;
width: 0px;
margin: 0px;
}
.box_first{
background: #fff;
width:0px;
height:0px;
position: relative;
}
これをひとつめのタブとボックスのclass属性に追加。もともとあるクラス属性「tab」と「box」は残しておく。でないと動かなくなるので。
２ 一つめのタブをコピって各boxの最後（任意）にペースト。
つまり、タブを閉じるためのリンクに見せかけるということ。
タブの数とボックスの数は一致していないと動かないので、閉じるためのタブ３つ分（今回は開くタブが３つなので）のボックスを３つの既存ボックスの後にペースト。（閉じていると見せかけるために0pxにした最初のボックスをコピペでOK。）
一つ目のボックス↓