Problem with jQuery accordion and cookies

Question

I have a jQuery accordion from this site and edited for my purposes, but the accordion only works in Firefox (not Safari or Chrome) and the cookies aren't being set correctly.

This is the jQuery:

            function initMenus() {
                $('#sidebar .letter_index').hide();
                $.each($('#sidebar .letter_index'), function() {
                    var cookie = $.cookie(this.id);
                    if (cookie === null || String(cookie).length < 1) {
                        $('#sidebar .letter_index:first').show();
                    }   else {
                        $('#' + this.id + ' .' + cookie).next().show();
                    }
                });
                $('#sidebar .letter_head').click(function() {
                    var checkElement = $(this).next();
                    var parent = this.parentNode.parentNode.id;

                    if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) {
                        $('#' + parent + ' .letter_index:visible').slideUp('normal');
                            if ((String(parent).length > 0) && (String(this.className).length > 0)) {
                                // not working
                                $.cookie(parent, this.className);
                            }
                        checkElement.slideDown('normal');
                        return false;
                    }
                }
                );
            }
            $(document).ready(function() {initMenus();});

This is how my HTML looks (sample item):

            <div id="sidebar">
      <h2 class="letter_head"><a href="#" class="ABC">ABC</h2>
      <ul class="letter_index">
        <li>Abc</li>
        <li>Bcd</li>
      </ul>
            </div>

I can't find the problem why the script won't work in Safari and Chrome.

I also don't know how to tell it to use the class of the a inside the h2 as the cookie value. (Currently the cookie is set as $.cookie(parent, this.className);, which produces cookies with the name container (the div above #sidebar) and the value letter_head. It needs to be something like 'sidebar' and 'ABC', 'DEF' and so on.

Thanks in advance!

Answer 1

I posted a demo for you. I had to rewrite a bunch of the code because the original script was written to work with multiple accordions, but I am going to assume you only want to use this script for one. Anyway, here is the HTML I used:

<div id="container">  
 <div id="sidebar">

  <h2 class="letter_head"><a href="#" class="ABC1">ABC1</a></h2>
  <ul class="letter_index">
   <li>Abc1</li>
   <li>Bcd1</li>
  </ul>

  <h2 class="letter_head"><a href="#" class="ABC2">ABC2</a></h2>
  <ul class="letter_index">
   <li>Abc2</li>
   <li>Bcd2</li>
  </ul>

  <h2 class="letter_head"><a href="#" class="ABC3">ABC3</a></h2>
  <ul class="letter_index">
   <li>Abc3</li>
   <li>Bcd3</li>
  </ul>

 </div>  
</div>

Script:

function initMenus() {
 var sidebar = $('#sidebar');
 sidebar.find('ul.letter_index').hide();
 var cookie = $.cookie( sidebar.attr('id') );
 if (cookie === null || String(cookie).length < 1) {
  sidebar.find('.letter_index:first').show();
 } else {
  sidebar.find(('h2 > a.' + cookie)).parent().next().show();
 }

 sidebar.find('h2.letter_head').click(function(){
  var checkElement = $(this).next();
  if ((checkElement.is('.letter_index')) && (!checkElement.is(':visible'))) {
   sidebar.find('.letter_index:visible').slideUp('normal');
   var headClassName = $(this).find('a').attr('class').trim();
   if (headClassName.length > 0) {
    $.cookie( sidebar.attr('id'), headClassName );
   }
   checkElement.slideDown('normal');
   return false;
  }
 });
}
$(document).ready(function() {initMenus();});