あまり重要でない情報などをコンパクトに見せたいときや、決められた範囲に多くの情報を配置したいときのTIPS。今回の想定は、コメント投稿欄をスライドして出したり、折りたたんだりするということを想定しました。
jQueryの基本的な利用方法で表現できるので、使用機会は結構あるかもしれません。

コメント投稿欄があるから、コメント投稿へ促しやすいという面もありますけど、サンプルってことで、畳んでしまいます。

完成サンプル

では、まずは、jQueryをダウンロード。ダウンロード出来るライブラリは３パターンありますが、一番容量が少ないの一番上がいいようです。ちなみに、真ん中のはコードが圧縮されていない、学習、テスト向け。その下はzip圧縮しているものになります。まぁ、今回は、一番上ですな。

実装したいページにまずは、jQueryを読み込みます。

<script type="text/javascript" src="/js/jquery.js"></script> 

 // show commnet form id


$(document).ready(function(){





$(".toggle").click(function () {


if ($("#coment-form").is(":hidden")) {


$("#coment-form").slideDown("slow");


} else {


$("#coment-form").slideUp("slow");


}





});

});

【HTML】

<div class="toggle">Click me! </div>





<div id="coment-form">


<div class="001">あいうえお、かきくけこあいうえお、かきくけこあいうえお、かきくけこあいうえお、かきくけこ


<textarea name="" cols="100" rows="20">あいうえお、かきくけこあいうえお、かきくけこあいうえお、かきくけこあいうえお、かきくけこあいうえお、かきくけこ</textarea>


</div>


</div>

マウスポインタを手のアイコンに変更する

$(".toggle").css({cursor:'pointer'}) 

リンクではないので、このままだと、カーソルが矢印のままで、気持ちわるいので、マウスポインタが上に載ったら、カーソルを変えて、人の手にする。

それを処理の一番上に追加してみる。

 // show commnet form id


$(document).ready(function(){


$(".toggle").css({cursor:'pointer'})


$(".toggle").click(function () {


if ($("#coment-form").is(":hidden")) {


$("#coment-form").slideDown("slow");


} else {


$("#coment-form").slideUp("slow");


}





});

});

セレクタの指定の方法とそのアクションについては、jQuery日本語リファレンス