今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. select要素の複数選択フォームを実装「Multiple Select」
  3. クリック操作でWebサイトを翻訳「translate.js」
  4. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」
  5. クリックで開閉!ドロップダウン・サイドメニュー「Tendina」

簡単実装!シンプルなアコーディオンメニュー「Accordion」

スポンサーリンク

シンプルなアコーディオンメニューを簡単に実装することができるプラグイン「Accordion」を紹介します。

jQueryプラグイン「Accordion」

このプラグインを使えば、リストタグ(li)を使ったシンプルなアコーディオンメニューを実装することができます。

アコーディオンメニューはタイトルをクリックするとアニメーション効果付きでコンテンツが表示されます。

オプションではアニメーションの速度などを指定することができるので、簡単にカスタマイズすることができます。

スポンサーリンク

デモのアコーディオンメニューをご覧ください。

「Accordion」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Acccordionのデモでーす。">
<title>Acccordion - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<ul id='accordion'>
<li>
  <div class='topWrap clearfix'>
    <span>たいとるだよ 1</span>
  </div>
  <div class='details'>
    <span>あ<br />い<br />う<br />え<br />お</span>
  </div>
</li>
<li>
  <div class='topWrap clearfix'>
    <span>たいとるだよ 2</span>
  </div>
  <div class='details'>
    <span>か<br />き<br />く<br />け<br />こ</span>
  </div>
</li>
<li>
  <div class='topWrap clearfix'>
    <span>たいとるだよ 3</span>
  </div>
  <div class='details'>
    <span>さ<br />し<br />す<br />せ<br />そ</span>
  </div>
</li>
<li>
  <div class='topWrap clearfix'>
    <span>たいとるだよ 4</span>
  </div>
  <div class='details'>
    <span>た<br />ち<br />つ<br />て<br />と</span>
  </div>
</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/accordion.js"></script>
<script>
$(document).ready(function(){
  $("#accordion").accordion({
    tabClick: ".topWrap", 
    tabContent: ".details",
    accordAnimation: "2000",
    bodyAnimation: "2000",
    spaceTop: "200"
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)