problem using jquery ui accordion in drupal

Question

Hello, I am trying to use the jquery-ui accordion functionality on a drupal page. I have teams with multiple people in each team that I want to display. I have a view set up that groups by team, and has contact info for each team member. My accordion doesn't seem to be working. I used <?php jquery_ui_add('ui.accordion'); ?> to import the correct js file from the jquery ui module, and it is showing up in the js file.

I was wondering if I have too many div tags and that is shomehow messing with it. Does anyone see anything that may be affecting this?

Thanks for any thoughts.

Here is some sample code -

<div id="accordion">

<div>
      <h3><a href="#">Team: 1</a></h3>

     <p>

  <div class="views-field-title">
          <label class="views-label-title">
        Title:
      </label>
                <span class="field-content"><a href="/node/83">John Doe</a></span>
  </div>

  <div class="views-field-field-email-value">
          <label class="views-label-field-email-value">
        Email:
      </label>
                <span class="field-content">[email protected]</span>
  </div>

  <div class="views-field-field-phone-value">
          <label class="views-label-field-phone-value">
        Phone:
      </label>
                <span class="field-content">555-555-5555</span>
  </div>

  <div class="views-field-field-extension-value">
          <label class="views-label-field-extension-value">
        Extension:
      </label>
                <span class="field-content"></span>
  </div>

  <div class="views-field-field-role-value">
          <label class="views-label-field-role-value">
        Role:
      </label>
                <span class="field-content">Team Leader</span>
  </div>
    </p>

and here is my jquery accordion call -

<script>
  $(document).ready(function() {
 $(function() {
  $( "#accordion" ).accordion();
 });
  });
  </script>

Answer 1

First off, when troubleshoot jQuery I have found it very useful to scale down any HTML that I pass to it to be parsed. Next, are you sure that the UI library is being called in. Try using drupal_add_js('/path/to/jquery.ui.js'); when you load your module.