長いソースコードや文章を簡単にアコーディオンさせる jQuery のサンプルを作ってみました。 ブログを書いていて、長いソースコードが出てきた場合、それをそのまま pre 要素で掲載しちゃっていいものか迷うときがあります。ソースコードを見て理解したい人には親切だけど、使い方とかだけを見たい人には邪魔だろうなーと。そういったときに、とりあえず非表示にしておいて、見たい人はクリックしてアコーディオンし...
長いソースコードや文章を簡単にアコーディオンさせる 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);
});
});
次のファイルを、ダウンロードして解凍し、simple_accordion.js というファイルをサーバーにアップロードします。
続いて、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="simple_accordion" 」を追加します。class 名を追加する要素は、p 要素でも pre 要素でも blockquote 要素でも大丈夫です。
次に、今「 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>
以上です。