アコーディオンの開閉状態を保持する

Question

前提・実現したいこと

javascript入門者です。
（こういうことが書いてあるのかな、、？というレベルです。）

開閉式のアコーディオンを作成したいのですが、ネット上のサンプルを触りながら試行錯誤しています。

・はじめから開いた状態にしたい
・閉じたら閉じた状態、開いたら開いた状態をリロードやページ遷移したあとでも保持させたいのです。
・現在、jquery.cookie.jsを参考にしてるのですが、js.cookie.jsでの書き方も教えていただけましたら幸いです。

該当のソースコード

<script>
$(function(){
  if($.cookie("open-box")){
    $("#box").show();
  }
  $("#btn").click(function() {
    if($.cookie("open-box")){
      $("#box").slideUp();
      $.removeCookie("open-box" , { path: "/" });
    } else {
      $("#box").slideDown();
      $.cookie("open-box" , "open" , { expires: 7,  path: "/" });
    }
  return false;
  });
});
</script>

<style>
#box { display: none;}
</style>

<p id="btn">ボタン</p>
<div id="box">テストテストテストテストテスト</div>

試したこと

サンプルを参考に上記のようにしてみたのですが、はじめから開いた状態になりません。
display: none;をかけてるせいかもしれないのですが、これを取ると、閉じた状態でリロードすると、閉じた状態で保持されずに開いた状態になってしまうのです。

教えていただけましたら幸いです。
よろしくお願いいたします。

Comments

[x_x]

再現しませんが、ローカルでテストしているのでしょうか？

Answer 1

URLハッシュを使う方法が複数提案されていますが、ハッシュはフラグメント識別子として利用する為にあるので、その役割を期待しないなら使うべきではないと感じます。
期待するなら、:target 疑似クラスを利用すれば、JavaScriptが不要になります。
(アニメーション機能が必要であれば、animation プロパティを併用)

以下、出先の為、未検証。

#box:not(:target) {
  display: none;
}

<a href="#box">box</a>
<div id="box">box contents</div>

Re: chinachica さん

Comments

[x_x]

アンカーは考えたのですが、やはりスクリプトがないと閉じられないというのが問題ではないかと

[think49]

@x_x さん
閉じるだけなら、<a href="#">で可能てす。
元々、ページ内位置指定スクロールの為にある機能なので、「ついでに開く」という程度のもので、開く/閉じるのフラグ管理にハッシュを使うのは用途が誤っていると考えています。
本来の用途はスクロールさせる事ですから。

[x_x]

どうやって<a href="#box">を<a href="#">にするのですか？
やはりスクリプトはいるのでは？

[think49]

toggleが必要なら、:checked で実装可能と思います。

[think49]

ただし、:checkedは状態保持が出来ません。
繰り返しますが、ハッシュは「フラグ管理の為の機能ではない」認識です。
要件を100%満たすなら、ハッシュではなく、CookieやlocalStrageをお勧めします。

[think49]

あるいは、GETパラメータという手段もあります。
https://developer.mozilla.org/ja/docs/Web/API/URL/searchParams
理想をいえば、サーバサイドで制御させたいところですが。

Answer 2

提示コードのみで動作すると思うのですが、ローカル環境で Cookie が使えない
https://teratail.com/questions/101774
とかの場合であれば、Web Storage を使う、hash を使うなどが考えられます。

hash を使うとした場合、URL が変わらないとリロード時に戻ってしまうため、何らかの方法で変更しなければなりません。

  $(location.hash).filter(':hidden').show();
  $('#btn').on('click', function(event) {
    var box = $('#box');
    var url = location.origin + location.pathname + (box.is(':visible') ? '' : '#box');
    box.slideToggle();
    history.replaceState(null, document.title, url);
  });

https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history#replaceState()_%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89
https://momdo.github.io/html/history.html#the-history-interface

Answer 3

私が先週回答したこちらの方法を使用すれば実装可能

hashを使用するのでjquery.cookie.jsは不要。
https://teratail.com/questions/192091

Comments

[chinachica]

ご回答ありがとうございます。

教えていただいたリンクの通りに書いてみたのですが、はじめから開いた状態で表示できたのですが、アコーディオンを閉じた状態でリロードすると、また開いた状態で再表示されてしまいました。
アコーディオンを閉じてリロードすると、そのまま閉じた状態で表示されるにはどうしたらいいでしょうか

すみません、、読み返すと質問文がとてもつたなかったです、、

[yasutomi]

URLにhash (#1など) が付いていないと正しく機能しないです。
リンク先の質問者の方は記載されているコードで解決できたので
コードが正しく書かれてあれば問題なく動作します。

Answer 4

まず第1に「リロードしたら開閉が保持されない」->当たり前です。
例えばアンカーリンクをつけるなどして開閉状態を示すものをつけなければいけません。
アンカーリンクによって動作を分岐（読み込み完了時の開閉を指定）するにはこちらのサイトが参考になると思います。

簡単に言うとJSのifで分岐しているのがわかると思います。そこでもしも#osakaだったら$('.hash').append('<p>大阪です</p>');違ったら$('.hash').append('<p>大阪ではありません</p>');をすると言う意味です。そこをCSSを適応する記述に書き換えればいけると思います。
そこはGoogle等で調べれば多くのやり方が書いてあるので自分のわかりやすい方法でやってみてください。

// URLのアンカー（#以降の部分）を取得
var urlHash = location.hash;

// URLにアンカーが存在する場合
if(urlHash){
// アンカーが#osakaかどうかを判断する
if (urlHash == '#osaka') {
$('.hash').append('<p>大阪です</p>');
} else {
$('.hash').append('<p>大阪ではありません</p>');
}
}

Comments

[chinachica]

ご回答ありがとうございます！
開閉状態を示すにはアンカーリンクが必要なのですね。
勉強不足なことばかりです、、
教えていただいサイトを参考にしたかったのですが、恥ずかしながら私の知識では難しいです、、
今後勉強しながら理解できるように努力いたします