セブンイレブンの「よくある質問ページ」のような、
<http://www.sej.co.jp/support/faq/products.html>
------------------
最初は文字だけ表示されていて、
クリックすると質問の回答が直下に表示され、
自由に表示・非表示できる
------------------
といったページを作成したいと思います。
javaスクリプトを使っているのだろうなということは分かるのですが、
具体的にどの関数を使うのかが分からず、
サンプル集を見ても似たようなものが見つからず、
調べ方も分からず途方にくれています。
※htmlで作成しようとしています
ご存知の方がいらっしゃいましたらご回答頂けますでしょうか。
よろしくお願い致します。
No.2ベストアンサー
- 回答日時:
<div>
<span onclick="func1(this)">Question</span>
<br>
<span style="display:none">
Answer
<br>
<span onclick="func2(this)">Close</span>
</span>
</div>
<script type="text/javascript">
function func1(x){
x.parentNode.getElementsByTagName("span").item(1).style.display="block";
}
function func2(x){
x.parentNode.style.display="none";
}
</script>
やりかたはいろいろあると思いますが、ごく単純なものを例示しました(飾りはいっさい省いてあります)。これだけで動きます。divとspanを使っていますが、使い分けは「表示/非表示」そのものとは無関係なので、ページのレイアウトに合わせて決めればよいです。<div>~</div>は何個あっても、QuestionとAnswerのところが変わるだけで、他は同じです。
この例では、HTMLの構造と関数の処理内容が不可分に結びついている点に注意してください。(span要素にid属性をつけて、それを利用すれば、HTMLの構造はかなり自由にすることができます。当然、関数も変わります。)
ご回答ありがとうございます。
javaスクリプトを直接触ったことがなかったので、この例はとても助かります!!!><
HTML構造の説明までありがとうございます。
これを元に、色々装飾して作成したいと思います。
本当にありがとうございました!!
No.1
- 回答日時:
サンプルがあればよいのであれば…
ご提示のサイトのものがそのままサンプルになりませんか?
ご提示のサイトではfaq.jsという外部ファイルが展開表示部分を主に行っているスクリプトと思われます。
コメントも入っているので、比較的わかりやすいかと思います。
(ほとんどそのまま利用しようと思えばできちゃうかも…)
ライブラリとしてjqueryを使用してますが、主に利用しているのはセレクタとしての機能みたいなので、ライブラリ不要なように書き換えるなどしてみるのもよろしいかと…
ご回答ありがとうございます。
確かに・・・外部ファイルの場所を間違えていて見れないと勘違いしていました。
申し訳ありません、ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- C言語・C++・C# プログラミングの問題です。至急教えてください。 /***から***/の部分をプログラミングにしてほし 1 2022/10/13 11:48
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(プログラミング・Web制作) Pythonを用いたフラッシュ暗算ソフトの開発に必要なもの 2 2023/01/29 02:22
- Excel(エクセル) Excelから複数のWordファイルを操作する方法について教えて頂きたい。 やりたいことは、複数のW 2 2022/07/26 20:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
mysqlのINSERT文の重複回避の条...
-
innerHTMLで、関数での記載内容...
-
テキストエリア内の一部の文字...
-
javascriptでpostした値が取得...
-
jqueryで要素の中身を要素の外...
-
クリックするとテーブルの列の...
-
Javascriptで可変のHTMLのID名...
-
getElementByIdの戻り値がnull...
-
Jquery 親要素で順番入れ替え
-
iframe内のリンクが飛ばないの...
-
jqueryを使って無駄なspanタグ...
-
JavaScript初心者です。URLの末...
-
<div ~ </div> で囲まれたテキ...
-
createElementが一瞬で消えてし...
-
jQueryのアコーディオンメニュ...
-
createElementで作成した要素を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
変数名をどのようにつけるのが...
-
表示・非表示のスクリプトで、...
-
クリックで色変更後に既に変更...
-
jQueryでクリックされた要素のi...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
変数内容をHTML内で表示する方法
-
テキストエリア内の一部の文字...
-
classの中の<a>タグにidを追加
おすすめ情報