頑張ったり頑張らなかったりこの広告は、90日以上更新していないブログに表示しています。プログラミングBootstrap3でのアコーディオンパネル(今回は.list-groupを使用)を作成したのですけど、http://getbootstrap.com/javascript/#collapse-example-accordionページ遷移が起こった際に、パネルが閉じた状態になる。これを開いたままにしたい。パネルを複数用意した場合に便利かと。調べてみると「Cookie使え」みたいな記事が出てくるので、js-cookieというものを使います。github.comHTMLこれはほぼ公式サイトのまま。前述したように.panel-bodyの代わりに.list-groupを使用する。'value');Cookieの期限も設定できる。expiresオプション。下記の例では7日間です。});Railsで使用する場合はこのオプションとパスを設定しないとうまく動作しないようです。'value'Cookieを削除Cookies.remove('name');オプションはEncode/Decodeオプション、Secure属性を付加するためのsecureオプションというものがあります。今回の場合はidを読み書きするだけなので、設定はしてません。}});パネルの開閉のイベントでは、Bootstrapのshown.bs.collapseとhidden.bs.collapseを使っています。.collapseが開いているときは.inクラスが付加されているので、そこのidを取得し、activeという変数に代入。それをCookieに設定する。アラートを出しているのですが、先ほど取得したidを表示しています。パネルが閉じたときはCookieを削除。ページが読み込まれた際に、保存しておいたCookieを取得。lastに代入しておきます。.collapseクラスから.inを削除。先ほど取得したidを持つ要素に.inクラスを追加。取得したidは#の付いていないものなので、先頭に付けることも忘れず。http://getbootstrap.com/javascript/#collapse-usagehttp://getbootstrap.com/javascript/#collapse-events参考にした記事はこちら。stackoverflow.comこちらのコードの方を参考にしたかな。Bootstrapのイベントを使っているので。http://stackoverflow.com/a/25258290Codepen上で作ってみました。CodePen.パネルを開くとアラートが出ます。その後、右下の「RERUN」ボタンを押すと、先ほど開いたパネルの状態が維持されているのを確認できるかとー。http://v4-al...2016-08-19Bootstrapのalertのようなものを作ってみる要はこういう風なものです。8リンクRSSフィードリンクはてなブログブログをはじめる週刊はてなブログはてなブログProQiitanoriyotcpのtipsはてなブログをはじめよう!noriyo_tcpさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。