search
LoginSignup
5

More than 3 years have passed since last update.

posted at

リンク遷移後でアコーディオンの開状態を保持する

リンク遷移後でアコーディオンの開状態を保持させたいが、単純にアコーディオンのみ実装すると閉状態に戻る。
これはリンクに限らず、リロードさせると閉状態に戻ってしまう。

解決するには、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>

これでサンプル一覧押し込みで、アコーディオンが開閉でき、リンク先遷移後でも開状態を保持できる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5