アコーディオンを開いた状態で表示したい（別ページからのリンクで）

##やりたいこと
####アコーディオンを開いた状態で表示したい
別ページから、飛んできた場合に、
特定の項目のアコーディオンを開いた状態にしたい

以下、イメージです。

##調べたこと　試したこと
キーワード「アコーディオン + 別ページ + 開いた」などで検索。
ふわふわした状態で、なんとなく、jsをコピペして、
クラス名をつけたりして何度かトライ。
1h以上、経過した為、ギブアップ。。

##jsのスキル
プラグインでスライドショーを実装する程度。
一から勉強していません。。

###ソース

<!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>
.help dd{
  display: none;
}
</style>

<div class="help">
  <dl>
    <dt>ハロウィンとは？</dt>
    <dd>大の大人がトラックを横転させたり物騒な事件が起こる夜のこと。</dd>
  </dl>
  <dl>
    <dt>ヘルプとは</dt>
    <dd>ヘルプについての質問が入ります。</dd>
  </dl>
  <dl>
    <dt>ヘルプとは02</dt>
    <dd>ヘルプについての質問が入ります。</dd>
  </dl>
  <dl>
    <dt>ヘルプとは03</dt>
    <dd>ヘルプについての質問が入ります。</dd>
  </dl>
  <dl id="help04">
    <dt>ヘルプとは04</dt>
    <dd>ヘルプについての質問が入ります。</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>

</body>
</html>

codepenはこちら

###最後に
恐らく、js詳しい方なら、すぐに解決できる問題かもしれませんが、
ご教授頂けると幸いです。

行動規範の内容に同意します

回答4件

ベストアンサー

全部書くのは面倒なので「リンク先のスタイルを指定する」という点に絞って書くと以下のHTML,CSSで実装できます．
工夫すればもっと細かなケースに対応できると思いますが，とりあえず:target擬似クラスの使い方を知ってもらうことに重点を置きます
百聞は一見に如かず↓

デモ：https://thimbleprojects.org/liveasnotes/571569/

こうなります

リンク：

html
1<!--URL末尾の「#」でリンク先ページのidを指定する-->
2<a href="example.com/special.html#dd1">See "dd1"</a>
3<a href="example.com/special.html#dd2">See "dd2"</a>
4<a href="example.com/special.html#dd3">See "dd3"</a>

リンク先：

html
1<dl>
2  <dt>title1</dt>
3  <dd id="dd1"><!--対応するidを振っておく-->
4    content
5  </dd>
6  <dt>title2</dt>
7  <dd id="dd2">
8    content
9  </dd>
10  <dt>title3</dt>
11  <dd id="dd3">
12    content
13  </dd>
14</dl>

css
1dd{
2  overflow: hidden;
3  /*普段は非表示*/
4  height: 0;
5  padding: 0;
6}
7dd:target{
8  /* #によるtargetが効いたときに表示*/
9  height: auto;
10  padding: 1rem;
11}

分からないことがあれば随時聞いてください

投稿2018/10/29 14:39

liveasnotes

総合スコア1284

Tatsurou

2018/10/30 03:12

いつもご回答いただきありがとうございます！！以下のコードで対応することができました。 https://codepen.io/aratamaru/pen/vVwOvg 以下のようにURLにIDを指定するだけでいけました。 http://hoge.co.jp/help.html#help04 非常に助かりました。ありがとうございます。

Tatsurou

2018/10/30 03:27

他の方が、修正後どうなったかわかるように、修正後のソースも以下に貼っておきます。 <!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> </body> </html>

行動規範の内容に同意します

URLのリクエストパラメーターに設定された値をJavaScriptで取得し、その値を元に、jQueryのtrigger()で目的の要素を開けばよいかと思います。他にも方法は考えられますが、この方法が割とお手軽です。

具体例は以下の通りです。

javascript
1$(function(){
2
3    //URLからリクエストパラメータをオブジェクトとして取得する関数
4    var getQueryParams = function(){
5
6        //URLからリクエストパラメータを取得する
7        var paramText = location.search;          //paramText: "?key1=value1&key2=value2"
8
9        //先頭の?を取り除く
10        paramText = paramText.substring(1, paramText.length);
11
12        //paramTextを&と=で区切り、それらをオブジェクトに格納する
13        var params = {};
14
15        var keyValuePairs = paramText.split("&");  //keyValuePairs: ["key1=value1", "key2=value2"]
16
17        $.each(keyValuePairs, function(i, keyValuePair){
18          var keyValue = keyValuePair.split("=");
19          params[keyValue[0]] = keyValue[1];       //keyValue[0]: key1, keyValue[1]: value1
20        })
21
22        return params;                             //params: {"key1": "value1", "key2": "value2"}
23    }
24
25    //dt要素の取得
26    var $dts = $(".help dt");
27
28    //1. クリックイベントを登録する
29    $dts.click(function(){
30        $(this).toggleClass("show");
31        $(this).next().slideToggle();
32        return false;
33    });
34
35    //2. リクエストパラメータからtargetの値を取得する
36    var param = getQueryParams();
37    var targetIndex = Number(param.target);
38
39    //targetIndexの値が以下の場合、不適切な値なので処理を中断する
40    //・数値以外が指定されている
41    //・要素の長さより大きい値が設定されている
42    //・負の数が指定されている
43    if((!targetIndex && targetIndex !== 0) || targetIndex >= $dts.length || targetIndex < 0){
44      return;
45    }
46
47    //3. targetIndexの値に応じて、クリックイベントを発火させる
48    $dts.eq(targetIndex).trigger("click")
49
50});

アクセスする際は、http://hoge.example.co.jp/huga/piyo.html?target=0のように、URLにリクエストパラメータ（target=0）を設定してアクセスするようにします。

投稿2018/10/29 11:05

退会済みユーザー

総合スコア0

Tatsurou

2018/10/30 03:19

RYNOさん　ご回答いただきありがとうございます。僕のスキルと時間を考え、liveAsNotesさんの回答を参考にさせていただきました。貴重なご回答を頂いたので、次回、チャレンジしてみたいと思います。

行動規範の内容に同意します

js
1  console.log(`遷移元${document.referrer}`);
2  console.log(`現在${location.href}`);

遷移元がカラか現在と同じなら何もせず、
それ以外ならアコーディオンを開けば良いのでは？

codepenとかだと想定した動きにならないと思います。

投稿2018/10/29 13:47

oikashinoa

総合スコア2826

退会済みユーザー

2018/10/29 13:53

私は質問者ではありませんが、1つ質問させてください。質問本文には「特定の項目のアコーディオンを開いた状態にしたい」とありますが、この方法では、どのようにアコーディオンを特定するのですか？

oikashinoa

2018/10/29 14:35

```js $(".help dt").click(function(){ $(this).toggleClass("show"); $(this).next().slideToggle(); return false; }); ``` ここでclass=helpの複数のdtダグにclickイベントを設定しているのが分かりますか？(分からなければ、上記実行後にvar help=$(".help dt")を動かして中身を見ると分かるかと。) clickイベント登録された後に以下の感じでClikeを呼べば3番目のアコーディオンが開きます。 help[3].click()

退会済みユーザー

2018/10/29 14:51

ご返信ありがとうございます。ただ、この返信は、私が求める質問への回答ではないようです。アコーディオンの開き方ではなく、開くアコーディオンの特定方法についてお聞きしたいです。具体的には、別ページから遷移したときに「help[3].click()」を呼ぶには、何らかの方法で「3」という情報を遷移時に与える必要がありますが、document.referrer/location.hrefを使った場合のその与え方についてお聞きしたいです。あと、「help[3].click()」で開くのは4番目のアコーディオンだと思います。

oikashinoa

2018/10/29 15:36

>「help[3].click()」で開くのは4番目のアコーディオンだと思います。これは失礼しました。4番目ですね。 > 質問本文には「特定の項目のアコーディオンを開いた状態にしたい」リンク先から可変で開く先を指定したいとまでは読めなかったので今の回答です。（だだ単にn番目を固定で開きたいとか）コードは複雑ですが汎用性から言えばRYNOさんが書かれている方法（URLにリクエストパラメータ埋め込む）が良いですね。

退会済みユーザー

2018/10/29 22:06

ご返信ありがとうございます。そもそも想定していなかったのですね。了解いたしました。

Tatsurou

2018/10/30 03:17

ご回答いただきありがとうございます！liveAsNotesさんの回答が対応が早く済むと判断し、liveAsNotesさんのご回答で対応できることができました。頂いた手法については、RYNOさんの方が汎用性が高いということなので、RYNOさんの回答を次、トライするときには参考にしたいと思います。

行動規範の内容に同意します

キーワード「アコーディオン + 別ページ + 開いた」などで検索。

★それはいったん忘れてください。
☆まずは、アコーディオンについて調べ、実装するとよいです。
★まとめてやろうとすると大変ですが、ひとつひとつこなせばあまり大したことがなかったりもするのです。
☆「Javascript アコーディオン」で検索したり、「jQuery UI」などを参考にするのも手かと。

投稿2018/10/29 10:19

編集2018/10/29 10:28

退会済みユーザー

総合スコア0