How to use more than one option in a jQuery UI accordion?

Question

So, I'm pretty new to javascript and jquery. I was using the jquery ui to make an accordion navigation bar. It worked fine when I just had the heightStyle set, but then I tried to add collapsible: true and it changed from an accordion to just headers and unordered list.

<script type="text/javascript" >
$(function() {
    $( "#accordion" ).accordion({
        collapsible: true
        heightStyle: "content"
    });
});
</script>

Answer 1

You're missing a comma between the properties of the options object. This causes a syntax error in your Javascript, preventing the code from running, thus leaving the markup unchanged as you describe.

The correct syntax would be:

<script type="text/javascript" >
     $(function() {
         $( "#accordion" ).accordion({
             collapsible: true,
             heightStyle: "content"
         });
     });
 </script>

Also, note you can usually debug JS errors in your browser's errors console. In Chrome and Firefox for example, the debug console can be launched with Ctrl+Shift+J or if you're using a Mac with Cmd+Shift+J.