JQuery UI Accordion Glitch

Question

Hey everyone,

I'm working with JQuery UI 1.6rc5 and I'm having a bit of trouble using an accordion widget. Here's the code I'm using.

<script>
$(document).ready(function(){
    $('#find-panel').accordion({
     header:"h3",
     autoHeight:true,
     alwaysOpen: false,
    }); 
});
</script>

<div id="find-panel" class="ui-accordion" style="width:450px;">
    <div class="ui-accordion-group">
     <h3 class="ui-accordion-header">
      <a href = "#">
      I know a Material
      </a>
     </h3>
     <div class="ui-accordion-content">
       <p>Enter a part number</p>
     </div>
    </div>

    <div class="ui-accordion-group">
     <h3 class="ui-accordion-header">
      <a href="#">
       I know a Tag
      </a>
     </h3>
     <div class="ui-accordion-content">
      <p>Enter a tag name</p>
     </div>
    </div>

    <div class="ui-accordion-group">
     <h3 class="ui-accordion-header">
      <a href="#">
       I know an Issue
      </a>
     </h3>
     <div class="ui-accordion-content">
      <p> Enter an issue id number</p>
     </div>
    </div> 
</div>

The problem I have is that this code doesn't work right in Safari. Specifically, the content in the div.ui-accordion-content tags doesn't get rendered properly. If I specify the height in the style, safri works fine.

I've been able to test the exact code above it in FF, and it works fine. Has anyone else seen this issue with Safari, and how did you solve it?

Answer 1

Well, Safari always chokes on me when I leave an extra comma in an object after the last object property like in your example (after alwaysOpen: false)

$('#find-panel').accordion({
    header:"h3",
    autoHeight:true,
    alwaysOpen: false,
});