方丈記がアコーディオン効果で読めます
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>40分でjQuery・方丈記編</title> <style> *{ margin: 0; padding: 0; } dl{ width: 400px; margin: 50px auto; } dl dt{ background: #7CADB6; border-bottom: 1px solid #FFFFFF; cursor: pointer; } dl dd{ border: 1px solid #7CADB6; border-top: none; padding: 0 20px; height: auto; } p { font-size: 16px; line-height: 1.5em; text-indent: 16px; } p.new { text-indent: 0; margin-left: -16px; } </style> <script src="jquery-1.7.2.min.js"></script> <script> $(function(){ $("dd:not(:first)").css("display","none"); $("dl dt").click(function(){ if($("+dd",this).css("display")=="none"){ $("dd").slideUp("slow"); $("+dd",this).slideDown("slow"); } }); }); </script> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <dl> <dt>最新情報</dt> <dd><p class="new">【ゆく河の流れ】、【安元の大火】</p></dd> <dt>【ゆく河の流れ】</dt> <dd><p>ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え、かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と、栖(すみか)とまたかくのごとし。</p> <p>たましきの都のうちに、棟を並べ、甍(いらか)を争へる、高き、いやしき、人の住ひは、世々を経て尽きせぬものなれど、これをまことかと尋ねれば、昔ありし家は稀(まれ)なり。或は去年(こぞ)焼けて、今年作れり。或は大家(おほいへ)亡びて小家(こいへ)となる。住む人もこれに同じ。所も変らず、人も多かれど、いにしへ見し人は、二三十人が中(うち)に、わづかにひとりふたりなり。朝(あした)に死に、夕(ゆふべ)に生るるならひ、ただ水の泡にぞ似たりける。</p> <p>知らず、生れ死ぬる人、何方(いずかた)より来たりて、何方へか去る。また知らず、仮の宿り、誰(た)が為にか心を悩まし、何によりてか目を喜ばしむる。その主と栖と、無常を争ふさま、いはばあさがほの露に異ならず。或は露落ちて花残れり。残るといへども朝日に枯れぬ。或は花しぼみて露なほ消えず。消えずといへども夕を待つ事なし。</p></dd> <dt>【安元の大火】</dt> <dd><p>予(われ)、ものの心を知れりしより、四十(よそぢ)あまりの春秋(しゅんじう)をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。</p> <p>去(いんし)、安元三年四月(うづき)廿八日かとよ。風烈(はげ)しく吹きて、静かならざりし夜、戌(いぬ)の時(とき)許(ばかり)、都の東南(たつみ)より火出で来て、西北(いぬゐ)に至る。はてには朱雀門・大極殿・大学寮・民部省などまで移りて、一夜のうちに塵灰(ちりはい)となりにき。</p> <p>火(ほ)もとは、樋口富(ひぐちとみ)の小路(こうじ)とかや。舞人(まひびと)を宿せる仮屋より出で来たりけるとなん。咲き迷ふ風に、とかく移りゆくほどに、扇(あふぎ)をひろげたるがごとく末広になりぬ。遠き家は煙(けぶり)に咽(むせ)び、近きあたりはひたすら焔(ほのほ)を地に吹きつけたり。空には灰を吹き立てたれば、火の光に映じて、あまねく紅(くれなゐ)なる中に、風に堪へず、吹き切られたる焔、飛ぶが如くして一二町を越えつつ移りゆく。その中の人、現(うつ)し心あらむや。或(あるい)は煙に咽びて倒れ伏し、或は焔にまぐれてたちまちに死ぬ。或は身ひとつ、からうじて逃るるも、資財を取り出づるに及ばず。七珍万宝さながら灰燼(くわいじん)となりにき。その費え、いくそばくぞ。そのたび、公卿の家十六焼けたり。ましてその外、数へ知るに及ばず。惣(すべ)て都のうち、三分が一に及べりとぞ。男女死ぬるもの数十人、馬・牛のたぐひ辺際を知らず。</p> <p>人の営み、皆愚かなるなかに、さしも危ふき京中の家をつくるとて、宝を費し、心を悩ます事は、すぐれてあぢきなくぞ侍る。</p></dd> </dl> </body> </html>
DOMがjQueryに化けた気がする…。
忘れずに使えるようになれればいいか、
とハードルを勝手に下げ下げ。