リンク遷移後でアコーディオンの開状態を保持させたいが、単純にアコーディオンのみ実装すると閉状態に戻る。
これはリンクに限らず、リロードさせると閉状態に戻ってしまう。
解決するには、jQueryでcookieを用いる。
jquery.cookie.jsでcookieが使えるようになる。
使用するには、ダウンロードするか、CDNサイトのURLから引っ張ってくるかになる。
ダウンロードは下記から
jquery.cookie.js
今回はCDNサイトからURLを引っ張ってくるやり方で行う。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
まずHTMLのheadに部分にscriptタグでURLを引っ張ってくる。
application.html.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<title>Cookieサンプル</title>
</html>
両方の方法で必ずjQueryのライブラリを読み込んでおく必要がある。
これで準備はオッケー。
jQueryで処理を書いていく。
test.js
$(function(){
if($.cookie("open-panel")){
$("#treeview-menu").show();
}
$("#accordion").click(function() {
if($.cookie("open-panel")){
$("#treeview-menu").slideUp();
$.removeCookie("open-panel" , { path: "/" });
} else {
$("#treeview-menu").slideDown();
$.cookie("open-panel" , "open" , { expires: 1, path: "/" });
}
return false;
});
});
htmlファイル
test.erb
<ul>
<li class="treeview active">
<a href="" class="accordion" id="accordion">サンプル一覧</a>
<ul class="treeview-menu" id="treeview-menu" style="display:none">
<% @samples.each do |sample| %>
<li><%= link_to sample.name, sample_path %></li>
<% end %>
</ul>
</li>
</ul>
これでサンプル一覧押し込みで、アコーディオンが開閉でき、リンク先遷移後でも開状態を保持できる。