title: jQuery UI accordion problem (could be related to jQuery UI tabs)
body: <p>Does anyone know why, when I move my accordion from tab1 into tab2, it stops working properly. I have given it a height and width. I have hosted it online for your convenience, it is situated in tab2 here: <a href="http://www.milltownyourlocalchurch.com/indextest.html" rel="nofollow">http://www.milltownyourlocalchurch.com/indextest.html</a></p>
  
  <p>The jQuery for the accordion:</p>
  
  <pre><code>&lt;!-- Accordion --&gt;
  &lt;script type="text/javascript" src="js/jquery-1.4.4.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
              $(function(){
                  // Accordion
                  $("#accordion").accordion({ header: "h3" });
              });
  &lt;/script&gt;
  </code></pre>
  
  <p>The css:</p>
  
  <pre><code>.ui-accordion { width: 100%; height: 100%;}
  .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
  .ui-accordion .ui-accordion-li-fix { display: inline; }
  .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
  .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
  .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
  .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
  .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }*/
  .ui-accordion .ui-accordion-content-active { display: block; }
  </code></pre>
  
  <p>I tried playing about with the dimensions, but its still acting wierd. As i mentioned, it works fine when its in tab 1. Im certain its to do with tabs so heres the tabs script:</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript"&gt;
  $(document).ready(function() {
      $(".tab_content").hide(); //Hide all content
      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
      $(".tab_content:first").show(); //Show first tab content
  
      //On Click Event
      $("ul.tabs li").click(function() {
          $("ul.tabs li").removeClass("active"); //Remove any "active" class
          $(this).addClass("active"); //Add "active" class to selected tab
          $(".tab_content").hide(); //Hide all tab content
  
          var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
          $(activeTab).fadeIn(); //Fade in the active ID content
          return false;
      });
  });
  &lt;/script&gt;
  </code></pre>