ansaurus

Question

jQuery custom Accordion - not working in IE/ Safari / Chrome

Answer 1

A:

I'm sorry, but we will need more information. I just tried this code (jQuery version 1.4.2):

<html>
<head><title>test</test>

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript">

function initExamples() {
  $('#examples ul').hide();
  $('#examples ul:first').show();
  $('#examples li a:first').addClass('exampleon');
  $('#examples li a').click(function(event) {
      event.preventDefault();
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#examples a.exampleon').removeClass('exampleon');
        $('#examples ul:visible').slideUp('normal');
        $(this).addClass('exampleon');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }

$(document).ready(function() {initExamples();});
</script>

</head>
<body>

<ul id="examples">
        <li>
            <a href="#">TITLE TEXT 1</a>
            <ul>
                <li><a href="#">MY CONTENT 1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 2</a>
            <ul>
                <li><a href="#">MY CONTENT 2</a></li>
            </ul>
        </li>
        <li>
            <a href="#">TITLE TEXT 3</a>
            <ul>
                <li><a href="#">MY CONTENT 3</a></li>
            </ul>
        </li>
</ul>
</body>
</html>

and it seems to be working properly under Safari. Maybe it's something else from your layout?

Karasutengu 2010-08-04 04:26:55

Answer 2

A:

Karasutengu many thanks indeed for taking the time to test for me, I really appreciate that. I've managed to switch the ':visible' for an alternative method using jquery's toggle. I think this may have been the stem of the problem.

If anyone's interested here's the final cross-browser compatible code:

$(document).ready(function() {
  $('#examples ul').hide();
  $('#examples ul:first').show();
  $('#examples li:first').addClass('exampleon');
    $('#examples li a').click(function() {
        $(this).css('outline','none');
        if($(this).parent().hasClass('exampleon')) {
            $(this).siblings('ul').slideUp('slow',function() {
                $(this).parent().removeClass('exampleon');
            });
        } else {
            $('#examples li.exampleon ul').slideUp('slow',function() {
                $(this).parent().removeClass('exampleon');
            });
            $(this).siblings('ul').slideToggle('slow',function() {
                $(this).parent().toggleClass('exampleon');
            });
        }
        return false;
    });
});

AndyCole 2010-08-05 21:37:07

ansaurus

tags:

views:

answers:

jQuery custom Accordion - not working in IE/ Safari / Chrome

related questions