jQuery cookie を使ってアコーディオン開閉の維持

先日書いた「jQuery UI 開いたアコーディオンを再現する」 は、URLパラメータで指定する方法なので、
あまり現実的ではない。
cookie を使う方法は、ネット検索するといろいろ出てくる。

ちょっと安易だが書いてみる。


アコーディオン・バーを h3 タグで書いた場合、

$(function(){
   $("#accordion").accordion({
        collapsible: true
      , autoHeight: false
      , active: false
    });
   $("h3").click(function(){
      $.cookie('opened_menu', $("h3").index(this),{ expires: 1 });
    });
   var opened_menu = $.cookie('opened_menu');
   if (opened_menu != undefined){
      $.globalEval("$('<色:#006600>#accordion</色>').accordion({active:"+opened_menu+"});");
   }
});


HTMLは以下のとおり。

<div id="accordion">
     <h3>Chapter-1</h3>
   <div>
      ..............
      <a href="c1.html">c1</a>
   </div>
  <h3>Chapter-2</h3>
   <div>
      ...............
      <a href="c2.html">c2</a>
   </div>
   <h3>Chapter-3</h3>
   <div>
      ..........
      <a href="c3.html">c3</a>
   </div>
</div>