スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

accordian.pack.js - JavaScriptで動くアコーディオンスクリプト

 「accordian.pack.js」というライブラリを利用したアコーディオンスクリプトです。「accordian.pack.js」は右クリックで保存してお使いください。スタイルシートも載せておきますので参考程度にどうぞ。
<script type="text/javascript" src="/js/accordian.pack.js"></script>
【BODY部分解説】
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" >
  <div id="test-header" class="accordion_headings header_highlight" >メニュー1</div>
  <div id="test-content">
    <div class="accordion_child">
   メニュー1の内容
  </div>
  </div>
  <div id="test1-header" class="accordion_headings" >メニュー2</div>
  <div id="test1-content">
    <div class="accordion_child">
     メニュー2の内容
    </div>
  </div>
  <div id="test2-header" class="accordion_headings" >メニュー3</div>
  <div id="test2-content">
    <div class="accordion_child">
     メニュー3の内容
    </div>
  </div>
</div>
</body>
 bodyタグを上記のように変更しないといけないので注意ください。
【スタイルシート解説】
#basic-accordian{
	font-size: 12px;
	padding:5px;
	width:450px;
}
.accordion_headings{
	padding:5px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}
.accordion_headings:hover{
	background:#00CCFF;
}
.accordion_child{
	padding:15px;
	background:#EEE;
}
.header_highlight{
	background:#00CCFF;
}
 で、実際設置してみましたのでサンプルをご覧ください。
レッツFC2ブログ アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。