アコーディオン

授業記録 jquery

jqueryによるアコーディオン

アコーディオン←確認ページ

ソース
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>アコーディオン</title>
<style type="text/css">
* {
　margin:0;
　padding:0;
　font-family:
　　"Hiragino Kaku Gothic Pro",
　　"ヒラギノ角ゴ Pro W3",
　　Meiryo, 
　　"メイリオ", 
　　Osaka, 
　　"MS P Gothic", 
　　"ＭＳ Ｐゴシック", 
　　sans-serif;
　line-height: 1.4;
}
body {
　background-color:#fff;
}
#container {
　width:600px;
　height:auto;
　margin:40px auto;
　background-color:#fff;
}
dt {
  cursor:pointer;
  font-size:120%;
  font-weight:bold;
　color:#fff;
　padding:10px;
　border-bottom:solid 2px #befaac;
　background: #b4ddb4; /* Old browsers */
　background: -moz-linear-gradient(top,  #b4ddb4 0%, #005700 100%, #002400 100%); /* FF3.6+ */
　background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4ddb4), color-stop(100%,#005700), color-stop(100%,#002400)); /* Chrome,Safari4+ */
　background: -webkit-linear-gradient(top,  #b4ddb4 0%,#005700 100%,#002400 100%); /* Chrome10+,Safari5.1+ */
　background: -o-linear-gradient(top,  #b4ddb4 0%,#005700 100%,#002400 100%); /* Opera 11.10+ */
　background: -ms-linear-gradient(top,  #b4ddb4 0%,#005700 100%,#002400 100%); /* IE10+ */
　background: linear-gradient(top,  #b4ddb4 0%,#005700 100%,#002400 100%); /* W3C */
　filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=0 ); /* IE6-9 */
　border-radius:5px;
　-moz-border-radius:5px;
　-webkit-boder-radius:5px;
}
dd {
　border:solid 2px #befaac;
　border-top:none;
　border-radius:5px;
　-moz-border-radius:5px;
　-webkit-boder-radius:5px;
}
p {
　padding:10px;
}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
　$(function() {
　　$("dd").css("display" , "none");
　　$("dl dt").click(function() {
　　　if($("+dd" , this).css("display") == "none") {
　　　　$("dd").slideUp("slow");
　　　　$("+dd" , this).slideDown("slow");
　　　} else {
	$("dd").slideUp("slow");
　　　}
　　});
　});
</script>
<head>
<body>
　<div id="container">
　　<dl>
　　　<dt>1月</dt>
　　　<dd>
　　　<p>1年12か月の最初の月。節は晩冬で、極寒の季節にあたっている。一般にこの月を正月の名でよぶが、
　　　古来、正月の称は陰暦1月のものであった。陰暦1月は睦月（むつき）ともいい、
　　　孟春（もうしゅん）の節で、春立ちたる陽気を迎え、楽しむ気分のあふれる季節にあたるが、
　　　現今の陽暦1月は寒（かん）に入る月で、寒さが1年でももっとも厳しい時期を迎えることになる。
　　　そのため、俳諧（はいかい）では、1月と正月はおのずから区別するべきものとされ、1月は冬の季語、
　　　正月、新年は春の季語とされている。</p>
　　　</dd>
　　　<dt>2月</dt>
　　　<dd>
　　　<p>1年12か月の第2番目の月。節は初春で、この月の初めに立春がある。
　　　しかし春は暦のうえだけで、寒さは厳しく、草や木の芽も堅いが、
　　　日脚は伸びて日差しも強くなり、日一日と春めいてくる。陰暦では如月（きさらぎ）ともいい、
　　　節は仲春にあたっている。「二月は逃げて走る」とか「二月ひと月は小糠（こぬか）三合で暮らす」
　　　の諺（ことわざ）があるように、あっという間に過ぎてしまう慌ただしい月であるが、
　　　1年の境目である節分、稲荷（いなり）神社の祭礼である初午（はつうま）祭、
　　　15日には釈迦（しゃか）入滅の法会涅槃会（ねはんえ）などの行事が行われる。</p>
　　　</dd>
　　　<dt>3月</dt>
　　　<dd>
　　　<p>1年12か月の第3番目の月。節は初春にあたるが、春もまだ浅く、
　　　自然の風物にも活気がみられず、寒々として趣（おもむき）には乏しい。
　　　陰暦3月は弥生（やよい）ともいい、季節も三春の終わりである晩春にあたる。
　　　この月になると、風雨も春らしく改まり、萌（も）え出た草木がいよいよ生い茂るとされ、
　　　「やよい」の語も「いやおい月」の転化したものだという。江戸時代には、
　　　この月の5日に奉公人の契約更改（出替わり）があり、人事の世界でもようやく慌ただしい季節を
　　　迎えるのである。</p>
　　　</dd>
　　　<dt>4月</dt>
　　　<dd>
　　　<p>1年12か月の第4番目の月。節は晩春で、春たけた感の深いころである。
　　　陰暦4月は卯月（うづき）ともいい、初夏の節で、風物がすべて夏めいて生気あふれる季節
　　　にあたるが、陽暦4月はサクラの花が爛漫（らんまん）と咲き誇る花時で、
　　　1年のうちでも人の心の浮き立つ時期である。また年度の始まる月で、
　　　官庁や会社では新人を迎えて新事業に着手し、学校でも新入生が加わって新学年が始まるなど
　　　、人事においても希望に胸の膨らむ季節である。</p>
　　　</dd>
　　　<dt>5月</dt>
　　　<dd>
　　　<p>1年12か月の5番目の月。節は穏やかな初夏の候で、明るく活気のあふれる月として親しまれ、
　　　陰暦の4月（卯月（うづき））にあたっている。陰暦5月は皐月（さつき）というが、
　　　それはこの月が仲夏の節にあたっていて、田に早苗（さなえ）を植えることが盛んであるため、
　　　早苗月といったのが訛（なま）ったからであるといい、また五月雨月（さみだれづき）の約されたものという説もある。
　　　祝月（いわいづき）の異称が古くからあり、5月1日になると人々は相賀し、
　　　この日から神社への参詣（さんけい）が多くなるといわれ、今日のゴールデン・ウィークを連想させる点が興味深い。</p>
　　　</dd>
　　　<dt>6月</dt>
　　　<dd>
　　　<p>1年の第6番目の月。陰暦ではこの月を水無月（みなづき）という。初夏から仲夏の季にあたり、
　　　中旬には梅雨入り、下旬には一年中でもっとも昼の長い日、夏至がくる。田植時で、
　　　麦の色づく麦秋の季節でもあって、農家ではもっとも多忙な月である。諺（ことわざ）の
　　　「六月に火桶（ひおけ）を売る」は、することが季節外れのたとえで、「六月無礼」は、
　　　陰暦6月は暑さが厳しいので、服装が少々乱れる無礼も許されることをいう。</p>
　　　</dd>
　　　<dt>7月</dt>
　　　<dd>
　　　<p>1年12か月の第7番目の月。節は晩夏であるが、梅雨明け前後から酷暑の候にかかる時期に
　　　あたっていて、実際の季節感にはそぐわないところがある。陰暦7月は文月（ふみづき）、
　　　七夕（たなばた）月などともいい、初秋の節で、天高く清明に澄み渡り、百穀は豊かに実って、
　　　人々の食欲も盛んになる季節とされるが、現今の陽暦では、月末には夏も本番の炎暑の候を迎える。
　　　月初めには田植などの農作業も一段落し、月なかばには先祖の霊を祭るお盆の行事が行われ、
　　　夏の土用に入る下旬には学校が夏休みになるなど、人の動きも慌ただしい時期である。</p>
　　　</dd>
　　　<dt>8月</dt>
　　　<dd>
　　　<p>1年12か月の8番目の月。節は初秋であるが、月のなかばまでは一年中でもっとも暑さの厳しい
　　　時期で、秋の涼気の訪れが待たれる月である。陰暦の文月（ふみづき）（7月）にあたり、
　　　暦のうえでは7日か8日に「立秋」があって、海や山への夏季行楽の最盛期を迎え、中旬には、
　　　所にもよるが、炎暑も峠を越すかの感があり、秋近しの思いもひとしおのころとなる。
　　　台風の襲来が懸念される月でもあるが、「八月大名」といって、この月は農家にとってはもっとも
　　　仕事の少ない月でもあるといわれた。また「離れ月」といって、この月に結婚すると
　　　離縁になるともいわれたが、これは八の字が左右に離れていることによる。
　　　陰暦では葉月（はづき）ともいう。</p>
　　　</dd>
　　　<dt>9月</dt>
　　　<dd>
　　　<p>1年12か月の第9番目の月。陰暦の8月にあたるため節は仲秋であるが、まだ残暑の厳しい日が多く、
　　　雨や台風も多い気象の変化の激しい月である。立春より数えて210日がこの月の1、2日に、
　　　220日が11、12日にあたり、この両日が大風の多い大厄日として、古来、
　　　農家で恐れられてきたことからも、この月の気象の変動の大きいことが知られる。
　　　陰暦9月は長月（ながつき）ともいうが、これは夜がようやく長くなるがゆえの語
　　　「夜長月」の略だという。ほかに、菊の花の盛りというので菊月の名が、
　　　紅葉の季というので紅葉月（もみじづき）、木染月などの名もある。</p>
　　　</dd>
　　　<dt>10月</dt>
　　　<dd>
　　　<p>1年12か月の第10番目の月。節は晩秋であるが、立冬が11月7、8日ごろであるため、
　　　晩秋の季はこの日にまで及んでいる。陰暦10月は神無月（かんなづき）ともいい、初冬の節で、
　　　空の青さも秋のそれとは異なり、明朗さよりも冷たく冴（さ）えかえったものとなって、
　　　冬の到来をしみじみと感じるようになるが、陽暦ではまだ秋の深まり行く季節である。
　　　寒い地方からは初霜や初雪の便りが届き、秋の夜長を思うころで、俳諧（はいかい）では
　　　10月を秋の季語、神無月を冬の季語としている。</p>
　　　</dd>
　　　<dt>11月</dt>
　　　<dd>
　　　<p>1年12か月の第11番目の月。節は初冬で、月初めの7、8日ごろには立冬の日があり、
　　　野山の風景のみならず、家々のなかにも冬めいた感じの漂う季節である。陰暦11月は霜月ともいい、
　　　冬もすっかり深まって、霜の厳しく降りる季節であるが、陽暦では1年のなかでももっとも
　　　気候の変化が少なく、穏やかで春のような暖かい、いわゆる小春日和（こはるびより）の日々が続く
　　　ころにあたり、人々が美しい自然の風物を求めて野山に遊ぶ行楽の季節でもある。</p>
　　　</dd>
　　　<dt>12月</dt>
　　　<dd>
　　　<p>1年12か月の最後の月。節は中冬で、冬も大分厳しくなって寒さも加わり、
　　　日脚も短くなって暮れやすく、22、23日ごろには昼がもっとも短く夜がいちばん長い日、
　　　冬至がやってくる。陰暦12月は師走（しわす）ともいい、晩冬の節で、冬も最盛期を迎えるとともに、
　　　慌ただしく人々が往来する年の暮れがやってくる。1年の終わりの月であるため、
　　　極月（ごくげつ）の称があり、師走の称は陽暦の12月の異称としても習慣的に用いられるが、
　　　これは、このことばが年末の激しい人事往来を連想させる語感をもっていることによるようである。
　　　この月の晦日（みそか）は1年最後の日たる大晦日で、この日の夜はとくに除夜とよんで、
　　　寺院では百八つの鐘をつき、家々では年越しそばといってそばを食う習慣などがある。</p>
　　　</dd>
　　</div>
　</body>
</html>