文字をクリックすると詳細文章が展開されるJS

解決済

質問者：litton101
質問日時：2013/07/01 21:32
回答数：1件

本の販売ページをつくりたいと思います。
以下の目次のように３章建て、それぞれに400字の要旨がついているとします。

第１章　前転のやり方
第２章　後転のやり方
第３章　倒立のやり方

各章名をクリックすると要旨が展開され、再度クリックすると閉じる（折りたたまれる）ようにしたいのです。例えば、第1章をクリックすると

第１章　前転のやり方
　　　ここに400字の要旨が展開ここに400字の要旨が展開
　　　ここに400字の要旨が展開ここに400字の要旨が展開
　　　ここに400字の要旨が展開ここに400字の要旨が展開
　　　ここに400字の要旨が展開ここに400字の要旨が展開
第２章　後転のやり方
第３章　倒立のやり方

ブラウザ依存なく、せめてIE、FF、Chrome、Safariだけは動作するようにしたいです。こういうJavascript（またはCSS）をご教示いただけないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2013/07/02 08:14

こんにちは。

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. …
<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>

- 1
- 件

通報する

この回答へのお礼

LancerVIIさん！！！

とてつもない回答をありがとうございました。感激です。
IE10、FF22、Chrome27あたりでは、ばっちり動作しました。

早速組み込みまして、非常に快適です。助かりました！！

※※※jQueryのリンクが切れて（省略されて）しまう方へ。

URL部分の広範の記述は以下です。
ajax/libs/jquery/1.9.0/jquery.min.js"></script>

通報する

お礼日時：2013/07/03 19:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！