Rails: показать и скрыть div

Question

У меня есть приложение rails, и я перебираю некоторые значения в БД:

<ul>
  <% @categories.each do |category| %>
    <li onclick="showHide(event)"> <%= category.name %>
      <% unless category.children.empty? %>
        <ul class="categories" style="display:none;">
          <% category.children.each do |subcategory| %>
            <li><%=  link_to "#{subcategory.name}", search_path(:search => subcategory.id) %></li>
          <% end %>
        </ul>
     <% end %>
    </li>
  <% end %>
</ul>

И с помощью следующего javascript я могу показать и скрыть div, когда нажимаю на него:

function showHide(e) {
  var categoryList = e.currentTarget.querySelector(".categories");
  categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
}

Это работает, но мне нужно реализовать еще две вещи для этого.1. Когда я нажимаю на одну категорию и открываю другую, я хочу закрыть другую.2. Даже после того, как я обновлю страницу, я хочу найти способ запомнить последнюю цель (последний открытый div).

Любые идеи о том, как реализовать оба вышеперечисленных?

Обновление 1

Хорошо, я следовал @Panomosh советуют, я получил первый работать,И на втором, когда cookie не существует, я создаю его, а затем он выдаёт мне эту ошибку в консоли браузера:

TypeError: undefined is not an object (evaluating 'categoryList.currentTarget.querySelector')

Есть идеи почему?

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function showHide(e) {
    var divsToHide = document.getElementsByClassName("categories"); 
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }

    var myCookie = getCookie(".Cl");

    if (myCookie == null) {
        var categoryList = e.currentTarget.querySelector(".categories");
        setCookie(".Cl", categoryList)
        categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"

}
    else {
        var categoryList = getCookie(".Cl");
        categoryList.currentTarget.querySelector(".categories");
        categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
    }
}

function setCookie(c_name, value) {
    var now = new Date();
    var time = now.getTime();
    time += 300 * 1000;
    now.setTime(time);
    var c_value = escape(value) + ((time == null) ? "" : "; expires=" + now.toUTCString());
    document.cookie = c_name + "=" + c_value;
}