シンプルなアコーディオン/コンテンツ表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

スポンサードリンク

SAMPLE
CODE
DownLoad

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
}

#basic-accordian{
	width:350px;
	z-index:2;
	margin:0 auto;
}

.accordion_headings{
	padding:5px;
	background:#FF9900;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#FF3333;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#FF3333;
}

</style>
<script type="text/javascript" src="accordian.pack.js"></script>
<script type="text/javascript">
window.onload = function() {
	new Accordian('basic-accordian',5,'header_highlight');
}
</script>
</head>
<body>


<div id="basic-accordian" >

  <div id="tab1-header" class="accordion_headings header_highlight" >Tab1</div>  
  <div id="tab1-content">
    <div class="accordion_child">
    	Yoga is a science. That is the second thing to grasp. Yoga is a science, and not a vague, dreamy drifting or imagining. It is an applied science, a systematized collection of laws applied to bring about a definite end. It takes up the laws of psychology, applicable to the unfolding of the whole consciousness of man on every plane, in every world, and applies those rationally in a particular case. This rational application of the laws of unfolding consciousness acts exactly on the same principles that you see applied around you every day in other departments of science.
    </div>
  </div>
  
  <div id="tab2-header" class="accordion_headings" >Tab2</div>  
  <div id="tab2-content">
     <div class="accordion_child">
  You know, by looking at the world around you, how enormously the intelligence of man, co-operating with nature, may quicken “natural” processes, and the working of intelligence is as “natural” as anything else. We make this distinction, and practically it is a real one, between “rational” and “natural” growth, because human intelligence can guide the working of natural laws; and when we come to deal with Yoga, we are in the same department of applied science as, let us say, is the scientific farmer or gardener, when he applies the natural laws of selection to breeding.
     </div>
  </div>

  <div id="tab3-header" class="accordion_headings" >Tab3</div>
  <div id="tab3-content">
     <div class="accordion_child">
    	The farmer or gardener cannot transcend the laws of nature, nor can he work against them. He has no other laws of nature to work with save universal laws by which nature is evolving forms around us, and yet he does in a few years what nature takes, perhaps, hundreds of thousands of years to do.
     </div>
  </div>

</div>
</body>
</html>

	Simple Javascript Accordions \| Dezinerfoli

シンプルだけどメニュー配置を調整できるアコーディオンボックス。
動作も軽快で使い勝手が良いので場所を選ばず使用することができます。
ページが重なるような動作でページが切り替わります。

セッティング

１．ダウンロード/セッティング

サイトへ行きsimple_accordions_with_src.zipをダウンロードしてきます。
解凍したらデモのHTMLファイルも何個かありますが、とりあえずaccordian.pack.jsを都合の良い場所へアップしてください。
このスクリプトは数種類のメニュー配置が可能ですが、今回は一番ベーシックなものを設置します。

２．<head>設定

アップロードしたスクリプトを読み込ませます。

パスはアップした場所に合わせて調節してください。
次にスクリプトを実行する記述を行います。

bodyにonloadでもOKですがonloadが被るとめんどうなのでこのように記述した方が良いと思います。
CSSはこのページのサンプルの「CODE」タブを開いてコピペしてください。

３． HTMLマークアップ

まずアコーディオン全体を囲むタグを作成します。

ここで付加しているIDは<head>で設定したものです。

次にタブメニューとそれに対応するボックスを記述していきます。

<div id="basic-accordian" >
   <div id="tab1-header" class="accordion_headings header_highlight" >タブメニュータイトル</div>
   <div id="tab1-content">

   </div>
</div>　

tab1-header内にタブメニューのタイトルを書き込み、tab1-content内にコンテンツを記述します。
tab1-contentパディングなど設定されていないので直接コンテンツを記述するとかっこ悪くなってしまいますので、
以下のようにクッションになるボックスを入れてください。

<div id="basic-accordian" >
   <div id="tab1-header" class="accordion_headings header_highlight" >タブメニュータイトル</div>
   <div id="tab1-content">
   <div class="accordion_child">
   ココにコンテンツを記述
   </div>
   </div>
</div>　

タブメニュー部分とコンテンツを対応させるにはID名の付け方に法則があり、
○○○-header 、 ○○○-content のようにハイフン前が同一なら動作が連動するようになっています。（ハイフン以下は固定）
なので複数タブを設置する場合は、
△△△-header , △△△-content の様に名前をつけ <div id="basic-accordian" > 内に配置し行けばOKです。