title: Nestling multiple accordions in jQuery tabs
body: <p>I need to create a page with 3 tabs across the top, with an accordion inside each tab, however I am only able to get it to load the first accordion, and the others appear as unrendered. Any help would be appreciated. I did see that the accordion should be placed before the tabs in this instance, but thats not working for me either. </p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
      &lt;title&gt;Details&lt;/title&gt;
  
      &lt;!-- Website Styles --&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"&gt;
      &lt;link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet"&gt;
  
  
  
  
  
  
      &lt;style type="text/css"&gt;
      body {
      background-color: #000000;
  }
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="wrapper"&gt;
       &lt;div class="one_half"&gt;
       &lt;/div&gt;
  
  
  &lt;div class="one_half last"&gt;
     &lt;!-- Accordion --&gt;
  
  
     &lt;h2 class="demoHeaders"&gt;Tabs&lt;/h2&gt;
        &lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tabs-1"&gt;First&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-2"&gt;Second&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-3"&gt;Third&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div id="tabs-1"&gt;&lt;h2 class="demoHeaders"&gt;Accordion&lt;/h2&gt;
      &lt;div id="accordion"&gt;
      &lt;h3&gt;First&lt;/h3&gt;
      &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
      &lt;h3&gt;Second&lt;/h3&gt;
      &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
      &lt;h3&gt;Third&lt;/h3&gt;
      &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
      &lt;div id="tabs-2"&gt;&lt;div id="accordion"&gt;
      &lt;h3&gt;First&lt;/h3&gt;
      &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
      &lt;h3&gt;Second&lt;/h3&gt;
      &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
      &lt;h3&gt;Third&lt;/h3&gt;
      &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;&lt;/div&gt;
      &lt;div id="tabs-3"&gt;Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.&lt;/div&gt;
  &lt;/div&gt;
  
  
       &lt;/div&gt;
     &lt;/div&gt;
  
  
  
  
  
  &lt;/div&gt;
  
          &lt;!-- jQuery Scripts --&gt;
          &lt;script src="js/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.10.3.custom.js"&gt;&lt;/script&gt;
      &lt;script&gt;$(function() {
  
          $( "#accordion" ).accordion();
                  $( "#tabs" ).tabs();
          });
          &lt;/script&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;                      
  </code></pre>