Easy Accordion


Description: シンプルで設置の簡単なアコーディオンメニューです。クロスブラウザ対応でタイトルのテキストも縦にしてくれます。クリックで開く他、自動で開閉もします。
Sample: demo
Tutorial: jQuery plugin: Easy Accordion
License: -

Sample

タイトル1

タイトル1

ここにタイトル1の本文が入ります
Read more

タイトル2

タイトル2

ここにタイトル2の本文が入ります
Read more

タイトル3

タイトル3

ここにタイトル3の本文が入ります
Read more

タイトル4

タイトル4

ここにタイトル4の本文が入ります
Read more

タイトル5

タイトル5

ここにタイトル5の本文が入ります
Read more

タイトル6

タイトル6

ここにタイトル6の本文が入ります
Read more

Note

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyAccordion.js"></script>
<script type="text/javascript" src="scripts/utility.js"></script> 

プラグインを読み込んでマークアップするだけです。マークアップもシンプル。

<div id="accordion-1">
            <dl>
                <dt>タイトル1</dt>
                <dd><h2>タイトル1</h2><p>ここにタイトル1の本文が入ります<br /><a href="#" class="more">Read more</a></p></dd>
                <dt>タイトル2</dt>
                <dd><h2>タイトル2</h2><p>ここにタイトル2の本文が入ります<br /><a href="#" class="more">Read more</a></p></dd>

            </dl>
        </div>

Related snippet :

  • Description: 数値に合わせてバーの長さをアニメーションしながら視覚化するプラグインです。比較用のグラフはなかなか需要が高いので、こうした見せ方は効果あるかも知れま ...
  • Description: 横長で可愛いコンテンツスライダーです。オート機能も追加されたようです。縦横のサイズを決めれば画像に限らず、様々なコンテンツを入れることが可能で、1ペ ...
  • Description: Facebookのように、インスタンスサーチから選択後にタグ化出来るプラグインです。大量の選択肢がある場合は、ドロップダウンや入力方式であることが殆 ...
  • Description: 全画面をギャラリーとして使うプラグイン。左サムネイルで大きな画像を切り替えます。マウスの動きに合わせてサイドスライド、全画面に画像を表示します。その ...
  • Description: キーワードでその場でTwitter検索を可能にするプラグインです。jqueryUIとjQuery Twitter Search Pluginを併用し ...
  • Description: Youtubeの動画を背景全体にするライブラリです。自動でリピート再生してくれます。なかなかインパクトのある見せ方ですね。 Sample: ...
  • Description: 多機能なスライドプラグインです。IE6は非対応ですが、YoutubeやVimeoのような動画メディアや、ツールチップ付きの画像も入れることが可能です ...