- ベストアンサー
本の販売ページをつくりたいと思います。以下の目次のように３章建て、それぞれに400字の要旨がついているとします。
- 文字をクリックすると詳細文章が展開されるJS
- 各章名をクリックすると要旨が展開され、再度クリックすると閉じる（折りたたまれる）ようにしたいのです。例えば、第1章をクリックすると 第１章 前転のやり方 ここに400字の要旨が展開ここに400字の要旨が展開 ここに400字の要旨が展開ここに400字の要旨が展開 ここに400字の要旨が展開ここに400字の要旨が展開 ここに400字の要旨が展開ここに400字の要旨が展開 第２章 後転のやり方 第３章 倒立のやり方 ブラウザ依存なく、せめてIE、FF、Chrome、Safariだけは動作するようにしたいです。こういうJavascript（またはCSS）をご教示いただけないでしょうか。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 jQueryを使うまでも無いかもしれませんが、記述が簡単に出来、ブラウザの差異も極力吸収してくれますのでどのブラウザでも動くと思います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>TEST</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <style type="text/css"> section h2 { color: #333; background: #ccc; border: solid 1px #999; cursor: pointer; } section h2 + p { display: none; padding-left: 20px; } </style> <script> $().ready ( function() { $('section h2').click ( function() { // 他を自動的に閉じるなら以下を有効に // $('section p').hide(); $(this).next().toggle(); }); }); </script> </head> <body> <div class="wrapper"> <header> <h1>文字をクリックすると詳細文章が展開されるJS</h1> </header> <section> <h2>第１章 前転のやり方</h2> <p> 第１章-ここに400字の要旨が展開ここに400字の要旨が展開 </p> <h2>第２章 後転のやり方</h2> <p> 第２章-ここに400字の要旨が展開ここに400字の要旨が展開 </p> <h2>第３章 倒立のやり方</h2> <p> 第３章-ここに400字の要旨が展開ここに400字の要旨が展開 </p> </section> </div> </body> </html>
お礼
LancerVIIさん！！！ とてつもない回答をありがとうございました。感激です。 IE10、FF22、Chrome27あたりでは、ばっちり動作しました。 早速組み込みまして、非常に快適です。助かりました！！ ※※※jQueryのリンクが切れて（省略されて）しまう方へ。 URL部分の広範の記述は以下です。 ajax/libs/jquery/1.9.0/jquery.min.js"></script>