JavaScript

jQuery を使って長いソースや文章をアコーディオンさせるサンプル

2008-12-08
5分で読了
更新: 2025-12-14

目次

長いソースコードや文章を簡単にアコーディオンさせる 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 要素の内容。

以上です。

この記事をシェア

関連記事