長いソースコードや文章を簡単にアコーディオンさせる jQuery のサンプルを作ってみました。

ブログを書いていて、長いソースコードが出てきた場合、それをそのまま pre 要素で掲載しちゃっていいものか迷うときがあります。ソースコードを見て理解したい人には親切だけど、使い方とかだけを見たい人には邪魔だろうなーと。そういったときに、とりあえず非表示にしておいて、見たい人はクリックしてアコーディオンして見られれば便利かな、という単純な発想で作ってみました。

ただ、それだけだと芸がないので、「～を表示する。」とか「～を閉じる。」といった文章も自動的に生成させるようにしてみました。こうしておけば、文章中に表示に関する要素を一切追加しなくて済みます。

完成したソース

完成したソースコードは以下のようになります。と、ここでデモを兼ねて使っています。

$(function() {
 $('.simple_accordion').each(function(){
 var simple_accordion_title = $(this).attr('title');
 var simple_accordion_link = 
 $('<a class="simple_accordion_link" href="javascript:void(0);">' + simple_accordion_title + 'を表示する。</a>').toggle(
 function(){
 $(this).text(simple_accordion_title + 'を閉じる。');
 $(this).parent().next().slideDown();
 },
 function(){
 $(this).text(simple_accordion_title + 'を表示する。');
 $(this).parent().next().slideUp();
 }
 );
 var simple_accordion_p = $('<p></p>').append(simple_accordion_link);
 $(this).css({'display':'none'}).before(simple_accordion_p);
 });
});

使い方

jQuery などファイルの準備

次のファイルを、ダウンロードして解凍し、simple_accordion.js というファイルをサーバーにアップロードします。

• simple_accordion.zip

続いて、jQuery とアップロードしたファイルを読み込みます。ファイルへのパスは適宜変更してください。ここでは jQuery は 「AJAX Libraries API - Google Code」を使って読み込んでいます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="/js/simple_accordion.js" charset="UTF-8"></script>

これで準備OKです。

class の追加

アコーディオンさせたい文章に「 class="simple_accordion" 」を追加します。class 名を追加する要素は、p 要素でも pre 要素でも blockquote 要素でも大丈夫です。

title の追加

次に、今「 class="simple_accordion" 」を追加した要素に、title 属性を追加します。この title 要素の内容が、「～を表示する。」、「～を閉じる。」というリンクの「～」部分になって表示され、それをクリックするとアコーディオンするようになっています。

ちなみに、その「～を表示する。」、「～を閉じる。」というリンクは次のようなソースで生成されます。

<p><a class="simple_accordion_link" href="javascript:void(0);">～を表示する。</a></p>

サンプル

p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。

pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。

blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。

<p class="simple_accordion" title="p 要素のアコーディオン">p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。p 要素の内容。</p>

<pre class="text simple_accordion" title="pre 要素のアコーディオン"><code>pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。pre 要素の内容。
</code></pre>

<blockquote class="simple_accordion" cite="/blog/2008/11/10-173717.html" title="blockquote 要素のアコーディオン - jQuery でファイルをインクルードする （ jQuery によるモジュール化） - かたつむりくんのWWW">
<p>blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。</p>
</blockquote>

以上です。