javascriptでのアコーディオンメニュー

このQ&Aのポイント
  • 現在作成中のサイトでjavascriptを使って、クリックするとコンテンツが開閉するものを使っています。
  • 別ページからリンクしたときに、ページ遷移したタイミングでコンテンツも一緒に開きたいのですが、どのようにしたらよいでしょうか。
  • 質問:javascriptを使ってアコーディオンメニューを作成しており、リンクしたときにコンテンツも一緒に開く方法を教えてください。
回答を見る
  • ベストアンサー

javascriptでのアコーディオンメニュー

質問させていただきます。 宜しくお願い致します。 現在作成中のサイトで javascriptを使って、クリックするとコンテンツが開閉するものを使っています。 ソースがこちらです。 <script type="text/javascript"> $(function(){ $(".read_open_close").click(function(){ $(this).next().slideToggle(200); });}); </script> そしてHTMLのコードは下記になります。 <div class="read_open_close mgt-10" style="cursor:pointer; text-align:left"> <h3>ご注文方法</h3> </div> <div class="tuiki mgt-15" style="display: none;"> ○○○○○ </div> ご注文方法をクリックするとコンテンツが開く仕組みです。 こちらを別ページからリンクしたときに、ページ遷移したタイミングで コンテンツも一緒に開きたいのですが、 どのようにしたらよいでしょうか。。。 時間がなく十分に自分で調べることが出来ず、 申し訳ないのですが、 どなたかご教授いただければと助かります。 宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

>ページ遷移したタイミングで コンテンツも一緒に開きたいのですが 初期表示が、開いた状態になっていれば良いということでしょうか。  <div class="tuiki mgt-15" style="display: none;"> の部分の、style="display: none;" で最初に非表示に設定しているので、この指定をなくせば最初から表示された状態になるかと思います。

関連するQ&A

  • クリックすると上に開くアコーディオン

    当方、設置とCSSによる表示のカスタマイズはできますが、プログラムの修正はできないためぜひ皆様のお知恵をお貸しください。よろしくお願いいたします。 現在、スマホ向けサイトをコーディング中なのですが、コンテンツをアコーディオンで作成したいと考えています。 タイトルをクリックすると中のコンテンツが見える仕組みは同じなのですが、クリックするとタイトルが下に下がり、その上にコンテンツを開くという動作をさせたい場合はどの部分をどのように修正すればよいのでしょうか? アドバイスどうぞよろしくお願いします。 【acordion.js】 $(function(){ $(".acordion").hide(); $("h3").click(function(){ $(this).next().slideToggle(); $(this).toggleClass("open"); }); $(".acordion .close").click(function(){ $(this).parent().slideToggle(); }); }); 【acordion.jsを読み込んだHTML】 <h3>コンテンツのタイトル</h3> <div class="acordion"> コンテンツの中身。この部分をタイトルの上に開きたいです。<br /> 文章量は固定ではないため、可変に対応できると嬉しいです。 <div class="close">close</div> </div>

  • 【jQuery】スマフォサイトのアコーディオン

    スマートフォンサイトで使用するアコーディオンについて 下記サイトのものを参考に制作しています。 http://07design.net/blog/?p=477 こちらのスクリプトでは、一つのコンテンツをクリックして、 もう一度クリックしない限り開いたままの状態になりますが、 一つのコンテンツが開かれている場合、 その他のコンテンツを閉じるように動作させることは可能でしょうか? イメージ的にはこちらのサイトにあるようなものです。 http://www.geekzshu.com/jquery/975 どなたか解決策がお解かりの方がおられましたら 宜しくお願いいたします。 ■html <section class="list"> <div class="acordion"> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> <h3 class="trigger">タップで開閉<span class="open-close">open</span></h3> <div class="acordion_tree"> <p>ここに内容</p> </div> </div> </section> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header: "h3", collapsible:true, animated: 'bounceslide' , autoHeight:false, active:10 }); }); </script> ■javascript $(document).ready(function(){ //acordion_treeを一旦非表示に $(".acordion_tree").css("display","none"); //triggerをクリックすると以下を実行 $(".trigger").click(function(){ //もしもクリックしたtriggerの直後の.acordion_treeが非表示なら if($("+.acordion_tree",this).css("display")=="none"){ //classにactiveを追加 $(this).addClass("active"); //直後のacordion_treeをスライドダウン $("+.acordion_tree",this).slideDown("normal"); }else{ //classからactiveを削除 $(this).removeClass("active"); //クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ $("+.acordion_tree",this).slideUp("normal"); } }); });

  • 簡潔なJavaScriptで実現したい

    次のような、btnToggleというクラス名のdivタグがいくつかあるHTMLで、 それぞれクリックするとそれぞれの「開く/閉じる」が反転するという動きをさせたいです。 <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>AAA</div> </div> <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>BBB</div> </div> <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>CCC</div> </div>    : <div class="btnToggle"><a href="#"><span>+</span>開く</a> <div>XXX</div> </div> 下記のようなJavaScriptで実行してみたのですが、 いくつかのdivタグをそれぞれクリックすると、flgの値と現在の状態が入れ替わってしまいます。 クラス名が同じで、flgも一つの変数なので当たり前なのですが… <script type="text/javascript"> $(document).ready(function(){ var flg = "close"; $(".btnToggle").click(function(){ if(flg == "close"){ $(this).html("<span>-</span>閉じる"); flg = "open"; }else{ $(this).html("<span>+</span>開く"); flg = "close"; } }); }); </script> 私が考えられることは、classではなく、idで「btnToggle1」「btnToggle2」「btnToggle3」…などと定義し、 JavaScriptのプログラムを次のように書くしか思いつかないのですが、 これでは、我ながら間抜けなプログラムだなと思いました。 <script type="text/javascript"> $(document).ready(function(){ var flg1 = "close"; $(".btnToggle1").click(function(){ if(flg1 == "close"){ $(this).html("<span>-</span>閉じる"); flg1 = "open"; }else{ $(this).html("<span>+</span>開く"); flg1 = "close"; } }); var flg2 = "close"; $(".btnToggle2").click(function(){ if(flg2 == "close"){ $(this).html("<span>-</span>閉じる"); flg2 = "open"; }else{ $(this).html("<span>+</span>開く"); flg2 = "close"; } }); var flg3 = "close"; $(".btnToggle3").click(function(){ if(flg3 == "close"){ $(this).html("<span>-</span>閉じる"); flg3 = "open"; }else{ $(this).html("<span>+</span>開く"); flg3 = "close"; } });        :        : }); </script> 配列などを使えばもっと簡潔になるのでしょうか。 どうか教えてくださいますようお願い申し上げます。

  • slideToggleを複数のボタンで適用したい

    jQueryのslideToggleについての質問です。 以下のようなコードがあるとします。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jQuery show/hide</title> <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>「見出し1」</h3> <div>見出し1のコンテンツ...……<div class="class-name">コンテンツを閉じる</div></div> </div> </body> </html> 「見出し1」をクリックすると見出し1のコンテンツが表示されます。 もう一度「見出し1」をクリックすると見出し1のコンテンツが隠されます。 ・見出し1のコンテンツが表示されている状態で、「見出し1」をクリックする ・見出し1のコンテンツが表示されている状態で、「コンテンツを閉じる」をクリックする の2通りの場合で見出し1のコンテンツが隠されるようにしたいのですが、jqueryをどのように書き替えたらいいのでしょうか。 よろしくお願いします。

  • ajax を使って,htmlを読み込み表示する方法

    webページのfaqを作成しています。 目次が並んでいて,どれかひとつ質問をクリックすると,その下に回答が表示されるという仕組みにしようと考えています。 それについては以下のようにプログラムしてみました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); }); }); </script> </head> <body> <div class="demo-show"> <h3>質問1</h3> <div>"answer1.html"を読み込んで表示</div> <h3>質問2</h3> <div>"answer2.html"を読み込んで表示</div> <h3>質問3</h3> <div>"answer3.html"を読み込んで表示</div> </div> </body> これにhtmlファイルを読み込む機能を持たせるために,<script>に一番下の3行を追加しました。 <head> ...略... <script type="text/javascript" src="../../jQuery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('div.demo-show:eq(0)> div').hide(); $('div.demo-show:eq(0)> h3').click(function() { $(this).next().slideToggle('fast'); $("div.a-1").load("./answer1.html"); ←追加 $("div.a-2").load("./answer2.html"); ←追加 $("div.a-3").load("./answer3.html"); ←追加 }); }); </script> <body>は <div class="demo-show"> <h3>質問1</h3> <div. class="a-1"></div> <h3>質問2</h3> <div.class="a-2"></div> <h3>質問3</h3> <div.class="a-3"></div> </div> これを実行すると,文字の場所がずれて表示されてしまいます。 (今回の作業は既に出来上がっているページに機能を追加しているので,おそらくタグが干渉しあっているのだろうと思います。これは,細かく確認すれば直るとは思います) その他,細々と不具合があります。 また,質問の数は50以上あります。 この方法以外に良い方法がありましたら教えていただけると助かります。 よろしくお願いします。

  • jQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

    JavaScript、CSS初心者のものです。 今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。 これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか? お手数ですが、ご教示お願いします。 以下ソースを載せておきます。 ◆javascript◆ <script type="text/javascript"> $(function() { $("#simpleAccordion div").hide(); $("#simpleAccordion h2").each(function(i) { var elementVal = $(this).next("div"); $(this).click(function() { elementVal.toggle("fast"); }); }); }); </script> ◆HTML◆ <div id="simpleAccordion">  <h1>画像の箇所</h1>  <h2><a href="#">クリックする箇所</a></h2>  <div>クリックされると開く箇所</div>  <h2><a href="#">クリックする箇所</a></h2>  <div>クリックされると開く箇所</div> </div>

  • jQueryアコーディオンの検索について

    jQueryで作成した、アコーディオンの閉じている部分の検索について 色々と検索しましたが、解決できず悩んでいます。 jQueryでアコーディオンを作成しています。 【やりたいこと】 IEで cntrl+fでページ内検索した時 1、閉じている箇所の内容も検索する。 2、検索がヒットした場合アコーディオンを開く。 という動きをさせたい。 【知りたいこと】 IEで可能かどうか。 IEの検索で不可の場合 自作の検索フォームを作成すれば、 アコーディオンを開けるか?又その方法。 【疑問点】 IEで検索をすると 検索でヒットした場合文字色と背景色が変わりますが、 html上はその箇所が なんらか変化があったと認識されないのでしょうか? 最初は、検索が該当したら、javascriptとのイベント(onfocus?)でアコーディオンを開くというような動きができると考えましたが、 動きませんでした。 検索結果の含まれるタグを操作するという動きはできないのでしょうか。。。 もし何かご存じの方がいらっしゃいましたら、教えて頂けないでしょうか。 よろしくお願い致します。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.accordion').click(function() { $(this).next().slideToggle(); }).next().hide(); }); </script> <style type="text/css"> .accordion_head {cursor:pointer;} </style> </head> <body> <div> <h3 class="accordion">アコーディオンのトリガー部分1</h3> <p>アコーディオンする部分1。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分2</h3> <p>アコーディオンする部分2。</p> </div> <div> <h3 class="accordion">アコーディオンのトリガー部分3</h3> <p>アコーディオンする部分3。</p> </div> </body> </html>

  • JavaScriptでアコーディオンメニューを作る

    こちらでよくお世話になっています。 JavaScriptに詳しい方、どうか教えてください。 当方、まだまだJavaScriptは初心者です。 以下のようなHTMLがあって、 コンテンツ部分を普段は非表示で タイトル部分をクリックしたら、 その下の表示・非表示が切り替わるようにしたいと考えています。 (アコーディオンの感じです。) ------------------------- <div id="title1">タイトル1</div> <table id="contents1">  <tr><td>コンテンツ1</td></tr> </table> <div id="title2">タイトル2</div> <table id="contents2">  <tr><td>コンテンツ2</td></tr> </table> <div id="title3">タイトル3</div> <table id="contents3">  <tr><td>コンテンツ3</td></tr> </table> ちなみに、それぞれタイトルとコンテンツがセットになっていて、 titleのid名の末尾の番号と そこをクリックしたら、開閉するtableのid名の末尾の番号を一致させています。 ※このタイトルとコンテンツは動的に増えたり減ったりします。 プラグインを入れないで 自分でjavascriptを組みたいと考えているのですが どのようにすればよいのか、分からず こちらで質問をさせていただきました。 var divList = document.getElementsByTagName('div'); for(i=0; i<divList.length; i++){ } のようにやっていくのだろうとは思うのですが for文の中をどのように書いたらよいかを ご教授いただけたら助かります。 どうぞ宜しくお願いいたします。

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id;  alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか? <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

  • アコーディオンjquery

    ロリポップのサーバーにアコーディオンjqueryをおいています。 以下のように設置すると、項目をクリックしたときに 下に展開されるのですが chromeだと、左に余白ができてしまいます。 ie9だと、変に余白ができて、テキストがおかしな挙動します。。。 なぜでしょうか? --------------- <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <script type="text/javascript" src="../jq01/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function() { $("dd").hide(); $("dt").click(function() { $(this).toggleClass("bg2"); $(this).next().slideToggle(); }); }); </script> </head> <body> <dt class="bg1">ああああああああああああああああああああああああああああ</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd> <dt class="bg1">うううううううううううううううううううううううううう</dt> <dd>えええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええええ</dd> <dt class="bg1">おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dt> <dd>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</dd> </body> </html>

専門家に質問してみよう