jQuery を使って長いソースや文章をアコーディオンさせるサンプル
目次
長いソースコードや文章を簡単にアコーディオンさせる jQuery のサンプルを作ってみました。
ブログを書いていて、長いソースコードが出てきた場合、それをそのまま pre 要素で掲載しちゃっていいものか迷うときがあります。ソースコードを見て理解したい人には親切だけど、使い方とかだけを見たい人には邪魔だろうなーと。そういったときに、とりあえず非表示にしておいて、見たい人はクリックしてアコーディオンして見られれば便利かな、という単純な発想で作ってみました。
ただ、それだけだと芸がないので、「～を表示する。」とか「～を閉じる。」といった文章も自動的に生成させるようにしてみました。こうしておけば、文章中に表示に関する要素を一切追加しなくて済みます。
完成したソース
完成したソースコードは以下のようになります。と、ここでデモを兼ねて使っています。
$(function() {
$('.simple_accordion').each(function(){
var simple_accordion_title = $(this).attr('title');
var simple_accordion_link =
$('' + simple_accordion_title + 'を表示する。').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 = $('').append(simple_accordion_link);
$(this).css({'display':'none'}).before(simple_accordion_p);
});
});
使い方
jQuery などファイルの準備
次のファイルを、ダウンロードして解凍し、simple_accordion.js というファイルをサーバーにアップロードします。
続いて、jQuery とアップロードしたファイルを読み込みます。ファイルへのパスは適宜変更してください。ここでは jQuery は 「AJAX Libraries API - Google Code」を使って読み込んでいます。
これで準備OKです。
class の追加
アコーディオンさせたい文章に「 class="simple_accordion" 」を追加します。class 名を追加する要素は、p 要素でも pre 要素でも blockquote 要素でも大丈夫です。
title の追加
次に、今「 class="simple_accordion" 」を追加した要素に、title 属性を追加します。この title 要素の内容が、「～を表示する。」、「～を閉じる。」というリンクの「～」部分になって表示され、それをクリックするとアコーディオンするようになっています。
ちなみに、その「～を表示する。」、「～を閉じる。」というリンクは次のようなソースで生成されます。
サンプル
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 要素の内容。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 要素の内容。
以上です。