Выпадающее меню не отрабатывает cookie

Моя задача состоит в том, чтобы меню запоминало текущее состояние, когда открыт целый "аккордеон" и при переходе по ссылке на определенный сегмент товара, запоминало состояние "аккордеона".
HTML не полный, так как сейчас стоит цель прийти к реализации запоминания при открытии хотя бы 1-lvl меню.
Индекс куки принимает и вроде бы как отдаёт, но запоминание состояния не происходит.
Где я туплю ?

Js code :

 $(document).ready(function () {
  var checkCookie = $.cookie('nav-item');
  if (checkCookie != null) {
    $('#nav > ul:eq('+checkCookie+')').show();
  }
  $('#nav > li > a').click(function(){
      var navIndex = $('#nav > li > a').index(this);
      $.cookie('nav-item', 'navIndex'); 
    }); 
  $('#nav > li > span').click(function(){
      var navIndex = $('#nav > li > span').index(this);
      $.cookie('nav-item', navIndex);
    });
    $('#nav > li > span').click(function() {
        $("#nav ul").toggleClass('active');
    });
}); 

HTML code:

<div class="menu-categories-container">
        <ul id="nav">
            <li class="menu-item-has-children-1"><span class="open-lvl-1"></span><a href="#">Изделия из дерева
                </a>
            <ul class="menu-lvl-1">
                <li><a href="">Декор</a></li>
                <li><a href="">Геральдика</a></li>
                <li><a href="">Двери</a></li>
                <li><span class="open-lvl-1"></span><a href="">Декоративное панно</a></li>
                <li><a href="">Рамы и зеркала</a></li>
                <li class="menu-item-has-children-lvl-2">
                    <span class="open-lvl-1"></span>
                    <a href="">Резные лестницы из<br> дерева</a>
                    <ul class="menu-lvl-2">
                            <li><a href="">Балясины резные</a></li>
                            <li><a href="">Заходные столбы</a></li>
                    </ul>
                </li>
                <li><span class="open-lvl-1"></span><a href="">Религия</a></li>
                <li><a href="">Токарная обработка</a></li>
                <li><a href="">Часы</a></li>
            </ul>
        </li>
            <li class="menu-item-has-children-2"><span class="open-lvl-1"></span><a href="#">Художественное литьё</a>
        </li>
        </ul>
    </div>