タイトル
Java Scriptを使ったアコーディオン表示です。
PAGEをクリックしてください。
↓以下が実際のソースサンプルです。
▼script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("dd:not(:first) p").css("display","none");
$("dd:not(:first)").css("display","none");
$("dt:first").addClass("selected");
$("dl dt").click(function(){
if($("+dd",this).css("display")=="none"){
$("dt.selected +dd").slideUp("fast","swing",function(){
$(this).removeClass("selected");
$("p",this).css("display","none");
$("dt.selected +dd").slideDown("slow",function(){
$(this).addClass("selected");
$("p",this).fadeIn("slow");});});
$("dt.selected").removeClass("selected");
$(this).addClass("selected");}})
.mouseover(function(){
$(this).addClass("over");})
.mouseout(function(){
$(this).removeClass("over"); }); });
</script>
▼CSS
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
body{
background:#999;
}
dl{
width:800px;
margin:50px auto;
}
dt{
line-height:35px;
font-size:large;
text-indent:3em;
font-weight:bold;
color:white;
height:35px;
background:url("image/a1.jpg")
}
dt.over{
cursor:pointer;
}
dt.selected{
cursor:default;
color:black;
}
dd{
height:240px;
background:#CCC;
}
dd p{
text-indent:1em;
padding:20px;
}
</style>
▼ XHTML
<body> <dl> <dt>PAGE.1</dt><dd> <p>百獣の王といわれるライオンは、文字通り向うところ敵なし、つまりライオンを倒す相手がいない ので王といわれています。倒す相手がいなければ、地上はライオンで埋まるはずであります。ところが、ライオンの数は一向にふえません。アメリカライオンについて、アメリカのある学者が長年にわたって調査した結果でも、驚くべき事実として一部紹介されています。つまり彼らライオン達の数は、食べ物（他の動物）に比例して、けっして殖えないということです。これを逆にいえば、ライオンに食べられる動物達の数も一向に減らないという事実をも裏書きしているのであります。仮に、ライオンに食べられる動物達が百頭いたとします。すると、これを食べるライオンの数は、ライオンの生存を助ける数しか生かされていないということです。</p></dd> <dt>PAGE.2</dt><dd> <p>アメリカの学者は、アメリカライオンについて、自然の驚威（きょうい）である事実だけを述べ、それ以上のことは何一つ説明していませんが、こうした姿というものは、実は、自然が彼らを監視し、彼らをコントロールしているからに外なりません。すなわち、ライオンの数が殖えない理由は、ライオンの子が成長するまでに外の動物に食べられたり、死んだりして、その増殖率（ぞうしょくりつ）は草食動物の比ではないのです。こうみてきますと、何者にも襲われない成長したライオンはまさに王者であり、優雅（ゆうが）であり、特権階級（とっけんかいきゅう）のレッテルを貼ってもいいように思われますが、自然は、けっして不公平に扱ってはいません。彼らには飢（うえ）という苦しみが与えられています。 </p></dd> <dt>PAGE.3</dt><dd> <p>彼らは獲物（えもの）をとるのに大変な苦労をします。時には何十日も飢との戦いを強いられます。そうして、ヘトヘトになって、やっと獲物にありつくというのが彼らの宿命です。彼らの一生は、飢との戦いにあるといってもいいでしょう。これはなにもライオンにかぎらず、肉食動物のなかば宿命でもあります。もっとも、ケニアのライオンは獲物に困ることがないほど、草食動物に恵まれていますが、しかしやたらと草食動物を食い荒すことはないのです。年老いた動物か、病気で弱っているものしか狙いません。いわば、自然淘汰（しぜんとうた）の動物しか相手にしません。</p></dd> </dl> </body>
