Q&A
ご丁寧にありがとうございます。
試してみたのですが、ボタンのCSSがうまくいかず別のコードを入れてみたところできました。
ありがとうございました。
別ページから、飛んできた場合に、
特定の項目のアコーディオンを開いた状態にしたいのですが
中々うまくいかず、下記のコードも入れてみましたが動きませんでした。
実現したいこと
別ページからのリンクで指定したアコーディオンを開いた状態で表示したいです。
該当のソースコード
<!DOCTYPE html> <html> <head> <title>TITLE</title> <meta description=""> <meta charset="utf-8"> </head> <style> h1 { font-weight: bold; font-size: 1.5em; text-align: center; } .inner { max-width: 940px; padding: 10px; margin: 0 auto; } #main { text-align: center; } /* 多階層のアコーディオンパネル */ #accordion-panel dt { cursor: pointer; margin-bottom: 1px; } #accordion-panel dd .inner { background-color: #f5f5f5; border: 1px solid #ccc; margin: 3px 0; } #accordion-panel dd { display: none; } .layer-1 dt { background-color: #9aabf3; padding: 5px 0; font-size: 1.25em; text-align: center; color: #0d2170; } .layer-2 dt { background-color: #b8c4f7; padding: 5px 0; font-size: 1.0em; text-align: center; color: #0d2170; } .layer-3 dt { background-color: #d7defa; margin-bottom: 1px; padding: 5px 0; font-size: 0.8em; text-align: center; color: #0d2170; } </style> <!-- ▲ CSS ▲ --> <body> <!-- ▼ container ▼ --> <div id="container"> <!-- ▼ header ▼ --> <div id="header"> <div class="inner"> <h1>多階層のアコーディオンパネル</h1> </div> <!-- /.inner --> </div> <!-- /#header --> <!-- ▲ header ▲ --> <!-- ▼ main ▼ --> <div id="main"> <div class="inner"> <div id="accordion-panel"> <dl class="layer-1"> <dt>製品情報</dt> <dd> <dl class="layer-2"> <dt>無線ＬＡＮ・有線ＬＡＮ</dt> <dd> <dl class="layer-3"> <dt>無線ＬＡＮ</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>有線ＬＡＮ</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>ハードディスク</dt> <dd> <dl class="layer-3"> <dt>外付けＨＤＤ</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>ポータブルＨＤＤ</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>映像・音響機器</dt> <dd> <dl class="layer-3"> <dt>ＨＤＤレコーダー</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>メディアプレーヤー</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> </dl> </dd> <dt>サポート</dt> <dd> <dl class="layer-2"> <dt>よくある質問</dt> <dd> <dl class="layer-3"> <dt>法人のお客様</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>個人のお客様</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>サポートセンター</dt> <dd> <dl class="layer-3"> <dt>パソコン関連</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>家電関連</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>修理窓口</dt> <dd> <dl class="layer-3"> <dt>東日本修理サービス</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>西日本修理サービス</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> </dl> </dd> <dt>会社情報</dt> <dd> <dl class="layer-2"> <dt>会社案内</dt> <dd> <dl class="layer-3"> <dt>会社概要</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>会社沿革</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>環境への取り込み</dt> <dd> <dl class="layer-3"> <dt>環境技術</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>環境報告書</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> <dt>採用情報</dt> <dd> <dl class="layer-3"> <dt>新卒採用</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> <dt>キャリア採用</dt> <dd> <div class="inner"> <p>内容</p><p>内容</p><p>内容</p><p>内容</p><p>内容</p> </div> </dd> </dl> </dd> </dl> </dd> </dl> </div> <!-- /#accordion-panel --> </div> <!-- /.inner --> </div> <!-- /#main --> <!-- ▲ main ▲ --> </div> <!-- /#container --> <!-- ▲ container ▲ --> <!-- ▼ jQuery ▼ --> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script> $(function(){ var ap = $('#accordion-panel'); ap.find('dt').on('click', function(){ var flag = $(this).next('dd').is(":hidden"); $(this).siblings('dd').slideUp(); /* 同階層の dd 要素を非表示 */ $(this).siblings('dd').find('dd').slideUp(); /* 同階層の dd 要素以下の dd 要素を非表示*/ if (flag) { $(this).next('dd').slideDown(); } else { $(this).next('dd').slideUp(); } }); }); </script> <!-- ▲ jQuery ▲ --> </body> </html>
試したこと
下記のコードも試してみたのですが、
どこにidやclassを入れたら動くのかわからず悩んでます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> /* 元々のjsを活かしたかった為、コメントアウトしました。 .help dd{ overflow: hidden; height: 0; padding: 0; } */ .help dd{/* 代わりに「display: none;」で非表示としました */ display: none; } .help dd:target{ display: block; /* #によるtargetが効いたときに表示*/ height: auto; padding: 1rem; } </style> <div class="help"> <dl> <dt>ハロウィンとは？</dt> <dd id="dd1">大の大人がトラックを横転させたり物騒な事件が起こる夜のこと。</dd> </dl> <dl> <dt>ヘルプとは</dt> <dd>ヘルプについての質問が入ります。</dd> </dl> <dl> <dt>ヘルプとは02</dt> <dd>ヘルプについての質問が入ります。</dd> </dl> <dl> <dt>ヘルプとは03</dt> <dd>ヘルプについての質問が入ります。</dd> </dl> <dl> <dt>ヘルプとは04</dt> <dd id="help04">ヘルプについての質問が入ります。</dd> </dl> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(window).on('load', function () { $(function(){ $(".help dt").click(function(){ $(this).toggleClass("show"); $(this).next().slideToggle(); return false; }); }); }); </script> `
最後まで読んでくださりありがとうございます。
ご回答いただければ幸いです。
回答2件
0
自己解決
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <style> h1 { font-weight: bold; font-size: 1.5em; text-align: center; } .inner { max-width: 940px; padding: 10px; margin: 0 auto; text-align: left; } .inner img{ width: 100%; } #main { text-align: center; } /* ---------------アコーディオンパネル -----------------*/ .acrd dd{ display: none; } .acrd dd:target{ display: block; height: auto; padding: 1rem; } #accordion-panel dt,#accordion-panel_6 dt{ cursor: pointer; margin-bottom: 1px; } #accordion-panel dd .inner,#accordion-panel_6 dd .inner{ background-color: #f5f5f5; border: 1px solid #ccc; margin: 3px 0; } #accordion-panel dd,#accordion-panel_6 dd{ width:100%; margin:0 auto; padding-left: 0; } .layer-1 dt { background-color: #eaeaea; padding: 5px 0; font-size: 1em; text-align: center; color: #222222; } .layer-2 dt { background-color: #ffffff; padding: 8px 0; font-size: 0.8em; text-align: center; color: #222222; border-bottom: 0.5px solid #222222; } .layer-2 dt:last-of-type { border-bottom:none; } div.inner p{ font-size: 0.8em; } ul.sub{ list-style: none; padding-left: 0; font-size: 0.9em; line-height: 1.4em; } h2{font-size: 1.2em; } /*--------------- 矢印-------------------- */ .accordion-title { position: relative; } .accordion-title::after{ border-right: solid 1px #000; border-top: solid 1px #000; content: ""; display: block; height: 8px; position: absolute; right: 25px; top: 38%; transform: rotate(135deg); transition: transform .3s ease-in-out, top .3s ease-in-out; width: 8px; } .accordion-title.open::after { top: 45%; transform: rotate(-45deg); } /* --------------矢印-ここまで------------- */ </style> <div class="acrd"> <div class="inner"> <!-- アコーディオンメニュー(メニュー) --> <div id="accordion-panel"> <dl class="layer-1"> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test01"> <div class="inner"> <h2>メニュー</h2> <p> 内容内容 </p> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test02"> <div class="inner"> <h2>メニュー</h2> <p> 内容内容 </p> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test03"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test04"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test05"> <div class="inner"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test06"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test07"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test08"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> <dt class="accordion-title js-accordion-title">メニュー</dt> <dd id="test09"> <div class="inner"> <h2>メニュー</h2> <p>内容内容</> </div> </dd> </dl> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script> $(window).on('load', function () { $(function(){ $(".acrd dt").click(function(){ /*クリックでコンテンツを開閉*/ $(this).next().slideToggle(); return false; }); }); $(function () { // タイトルをクリックすると $(".accordion-title").on("click", function () { // タイトルにopenクラスを付け外しして矢印の向きを変更 $(this).toggleClass("open", 300); }); }); }); $('dd[id^=#]').on('click', function() { // 開閉パネルが閉じていたら if($(this).toggleClass('dd').css('display') == 'none') return false; $(".accordion-title").removeClass("open"); }); </script> </body> </html> 10月14日 19:09
投稿2022/10/16 03:37
総合スコア1
0
- アコーディオンでクリックするところ（
dt）を<button>要素にし、 - そこにidをつけ、
- 別ページからそのidにアンカーリンクをとばし、
- ボタンにfocusが当たっているアコーディオンを開く。
というのはいかがでしょうか？
html:index.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>トップページ｜アコーディオンサンプル</title> 8</head> 9<body> 10 <nav> 11 <ul> 12 <li><a href="accordion.html">アコーディオンページ</a></li> 13 <li><a href="accordion.html#accordion-1">アコーディオン１</a></li> 14 <li><a href="accordion.html#accordion-2">アコーディオン２</a></li> 15 <li><a href="accordion.html#accordion-3">アコーディオン３</a></li> 16 </ul> 17 </nav> 18</body> 19</html>
html:accordion.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>アコーディオンページ｜アコーディオンサンプル</title> 8 <script src="https://code.jquery.com/jquery-3.6.1.min.js" 9 integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> 10 <style> 11 .accordion { 12 width: 90%; 13 max-width: 800px; 14 margin-right: auto; 15 margin-left: auto; 16 } 17 18 .accordion__item+.accordion__item { 19 margin-top: 1em; 20 } 21 22 .accordion__title>button { 23 width: 100%; 24 padding: 0.6em 1em; 25 appearance: none; 26 border: none; 27 background-color: #ddd; 28 cursor: pointer; 29 } 30 31 .accordion__content { 32 /* アコーディオン閉じた状態 */ 33 display: none; 34 35 margin: 0; 36 padding: 0.6em 1em; 37 background-color: #eee; 38 } 39 </style> 40</head> 41<body> 42 <dl class="accordion"> 43 <div class="accordion__item"> 44 <dt class="accordion__title"><button id="accordion-1">アコーディオン１</button></dt> 45 <dd class="accordion__content">アコーディオン１の内容テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> 46 </div> 47 <div class="accordion__item"> 48 <dt class="accordion__title"><button id="accordion-2">アコーディオン２</button></dt> 49 <dd class="accordion__content">アコーディオン２の内容テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> 50 </div> 51 <div class="accordion__item"> 52 <dt class="accordion__title"><button id="accordion-3">アコーディオン３</button></dt> 53 <dd class="accordion__content">アコーディオン３の内容テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</dd> 54 </div> 55 </dl> 56 57 <script> 58 jQuery(function ($) { 59 // ページロード時に、フォーカスの当たっているアコーディオンを開く 60 $('.accordion__title > button:focus').closest('.accordion__title').next().slideDown(); 61 62 // クリックしたアコーディオンを 開く <-> 閉じる を交互に 63 $('.accordion__title > button').on('click', function () { 64 $(this).closest('.accordion__title').next().slideToggle(); 65 }) 66 }) 67 </script> 68</body> 69</html>
投稿2022/10/13 18:03
総合スコア2316
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。