bootstrapのcollapseの開閉について

質問

bootstrapを使って、webページを作成してます。
アコーディオンパネル風に使うためにcollapseのタグを使用しておりますが、ページ移動後も開いたところだけ開きっぱなしに出来ないでしょうか。

サイドメニューの項目として使用したいので、是非教えていただきたいです。

回答No.2

Proof4

No.1の補足コメントに回答します。

ソースコードの提示がないため具体的な回答はできません。あくまで概要をお伝えします。
'遷移元のページのなにが開かれたのかという情報を保持する方法'ですが、No.1の回答にある通り、cookieに値をセットしさえすればよいです。（調べればやり方はすぐに見つけられることでしょう）

例としてソースコードを以下に示します。参考にしてください。

<button type="button" id="test_id1" value="1">1</button>
<button type="button" id="test_id2" value="2">2</button>
<button type="button" id="test_id3" value="3">3</button>
<button type="button" id="test_id4" value="4">4</button>
<button type="button" id="test_id5" value="5">5</button>
<a href="next_page.html">次のページへ</a>
<script>
　for(var i=0; i<5; i++){
　　num = i+1;
　　document.getElementById('test_id'+num).addEventListener('click', function(){
　　　document.cookie = 'button=' + encodeURIComponent(this.value);
　　});
　}
</script>

ボタンをクリックすると、押されたボタンのvalueがcookieに記録されます。

※注意※
1. このサイトの都合上、インデントを半角スペースで表現しています。検証の際は適宜置換してください。
2. Chromeの場合、ローカルではcookieを記録することができません。ローカルホストやサーバーにアップロードすると動作します。

お礼

教えていただきありがとうございます。Javascriptでcookieに値をセットをやったことないので、勉強します。

回答No.1

Proof4

開閉するdiv要素のclass、aria-expanded属性をそれぞれ
class="collapse show" aria-expanded="true"
とすると開いた状態になります。

これを踏まえて、あとは遷移元のページのなにが開かれたのかという情報を保持して、遷移先のページのDOM要素を操作（classとaria-expandedを上記の通り書き換える）すれば良いでしょう。Javascriptでcookieに値をセットしてやるのが無難な方法です。

お礼

教えていただきありがとうございます。Javascriptでcookieに値をセットをやったことないので、勉強します。

補足

早速のご回答いただきありがとうございます。

もし良ければ、遷移元のページのなにが開かれたのかという情報を保持する方法を教えていただけないでしょうか。