ページ内の画像や本文をスライドしながら表示／非表示を切り替えることができる
jquery.toggleElements.jsを使った方法です。

スライド時に斜めから出したり、入れ子にしたり、フェードインしたり、
と動きをつけられます。

以下は一番シンプルな形式です。

サンプル：
http://www.topknot.net/library/toggleElements/


1,以下からjsファイルをダウンロードする（※サンプルあり）
http://jquery.andreaseberhard.de/toggleElements/

2,head内にダウンロードしたjsファイルを指定する
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.toggleElements.pack.js"></script>

3,次のjavascriptを記入する
<script type="text/javascript">
$(document).ready(function(){
$('div.toggler-1').toggleElements( );
});
</script>


4,body内に表示させたい部分を<div class="toggler-1" title="見出しとか"></div>内に書く
<div class="toggler-1" title="Click me">
<p>テキストが入ります。<br>テキストが入ります。<br>テキストが入ります。<br>テキストが入ります。<br>テキストが入ります。</p>
</div>


5,クリックする部分はcssで指定しているので、cssを編集する
<style type="text/css">
/* Toggler - default style */
.toggler {
margin-bottom: 10px;
cursor:pointer;
display: block;
background: #fff;
border: 1px solid #ddd;
color: #ccc;
}
.toggler-closed {
padding: 7px;
background: #fff url(img/allowF.gif) no-repeat right;
border: 1px solid #ddd;
color: #4c4c4c;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}
.toggler-closed:hover {
padding: 7px;
background: #fff url(img/allowN.gif) no-repeat right;
border: 1px solid #ddd;
color: #4c4c4c;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}
.toggler-opened {
padding: 7px;
border: 1px solid #ddd;
color: #737373;
font-size: 14px;
text-decoration: none;
background: #eee url(img/allow_onF.gif) no-repeat right;
font-weight: bold;
}
.toggler-opened:hover {
padding: 7px;
border: 1px solid #ddd;
color: #737373;
font-size: 14px;
text-decoration: none;
background: #eee url(img/allow_onN.gif) no-repeat right;
font-weight: bold;
}
</style>

出典

jquery.toggleElements.js - Toggle HTML-Elements with jQuery

ライセンス

License - jQuery JavaScript Library

関連サイト