- ベストアンサー
JavaScriptのテキストのON、OFF
よくHPにある、Q&Aのページのような、 「Q」のテキストをクリックすると、スル～っと「A」のテキストが出る JavaScriptのやり方を教えていただけませんか？ お手数おかけ致しまうが、よろしくお願いします。
- zigaru
- お礼率86% (25/29)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 jQueryというものを利用すると比較的簡単に実装できます。 取り急ぎサンプルを作成しましたのでわからないところあったらまた聞いてください。 (HTMLとしてコピペしてあげればブラウザで確認できます) ==== サンプル.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScriptのテキストのON、OFF</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { // 全てのアンサー部分を取得 var $ans = $('.qa p'); $('#btn-allshow').click ( function() { // 全て表示ボタンが選択されたら表示 $ans.show(); }); $('#btn-allhide').click ( function() { // 全て閉じるボタンが選択されたら非表示 $ans.hide(); }); $('.qa h2').click ( function() { // h2がクリックされたらアニメーションを実行する // toggleは開いていれば閉じる、閉じれいれば開く // $(this).next()は.qa h2の次の要素、この場合pタグ領域 $(this).next().animate ( { height:'toggle', opacity:'toggle' }, { duration:'first'} ); }).mouseover ( function() { // h2にマウスカーソルが来た場合、スタイルシートの.hoverを追加 // すなわち、マウスカーソルを変更、背景色を変更 $(this).addClass ( 'hover' ); }).mouseout ( function() { // h2からマウスカーソルがいなくなった場合、スタイルシートの.hoverを削除 // すなわち最初の状態に戻る $(this).removeClass ( 'hover' ); }); }); </script> <style type="text/css"> h1 { background-color:#ccc; } div.qa { margin-left:10px; } div.qa > p { display:none;margin-left:10px;background-color:#fcc; } div.qa h2 { background-color:#ffc; } div.qa h2.hover { cursor:pointer;background-color:#f9c; } #controll { margin-left:10px; } </style> </head> <body> <h1>JavaScriptのテキストのON、OFF</h1> <div id="controll"> <button id="btn-allshow">全て表示</button> <button id="btn-allhide">全て閉じる</button> </div> <div class="qa"> <h2>Q1.あ行について教えて下さい。</h2> <p>あ行にはあ、い、う、え、おが存在します。</p> </div> <div class="qa"> <h2>Q2.か行について教えて下さい。</h2> <p>か行にはか、き、く、け、こが存在します。</p> </div> </body> </html>
その他の回答 (2)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 回答遅くなりました。すいません。 1.これはGoogleのライブラリからjQueryを読み込んでいます。 自分のサーバにjQueryを置いてそこから読み込むかの違いです。 いちいちダウンロードしなくて済むのと、常に最新版を利用できる(または過去のバージョン)がメリットです。 例えばgoogle.load('jquery','1.6.2')とすれば1.6.2が使用できます。 2.もちろん外部ファイルに定義することが可能です。
お礼
丁寧にどうもありがとうございました。 とても助かりました。m(_ _)m
- utun01
- ベストアンサー率40% (110/270)
書いたままいろいろしてたら出遅れてしまった;; No.1さんの方が素晴らしいサンプル作られているので、 あまりご参考になるか分かりませんが、一応張り付けておきます。 しょっぱい感じですが、必要最低限風です。 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#suubox').animate({ height: 'toggle' }, 0); $('#btn1').click(function(){ $('#suubox').animate({ height: 'toggle' }, 'slow'); }); }); </script> <style type="text/css"> div { font-size: 18px; color: #000000; border: 1px solid #000000; } #btn1 { height: 20px; width: 60px; } #suubox { height: 100px; width: 200px; } </style> </head> <body> <div id='btn1'>ボタン</div> <div id='suubox'>test<br />test<br />test<br />test<br />test<br /></div> </body> </html>
お礼
回答いただきありがとうございました。 貴重なお時間、感謝致します。m(_ _)m
お礼
試してみたら出来ました！！ どうもありがとうございます。m(_ _)m すみません。恐れ入りますが、初心者なもので・・・ わからない所を教えていただいてもよろしいでしょうか。 （１）下記は何の設定なのでしょうか。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> （２） このjQueryの設定は、html内に記述しなくても、例えばjsファイルとしてリンクして設定出来るのでしょうか。 お手数おかけ致しますが、２点よろしくお願い致します。
補足
回答どうもありがとうございます！ 初心者のため設定に時間がかかりそうです。 試してからお返事させていただきますので、少々お待ちください。m(_ _)m