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

長いソースコードや文章を簡単にアコーディオンさせる 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 というファイルをサーバーにアップロードします。

続いて、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="http://www.tinybeans.net/blog/2008/11/10-173717.html" title="blockquote 要素のアコーディオン - jQuery でファイルをインクルードする ( jQuery によるモジュール化) - かたつむりくんのWWW">
<p>blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。blockquote 要素の内容。</p>
</blockquote>

以上です。

  • このエントリーをはてなブックマークに追加
Just a second...