title: How to to split jQuery UI accordion in 2 columns
body: <p>I would like to split jQuery UI accordion in 2 columns but I cannot figure out how to do that.
  When I put </p>
  
  <pre><code>div style="float:left; width:50%;" 
  </code></pre>
  
  <p>accordion doesn’t work properly any more. 
  I have been customized this demo <a href="http://jqueryui.com/demos/accordion/collapsible.html" rel="nofollow">http://jqueryui.com/demos/accordion/collapsible.html</a></p>
  
  <p>Can somebody help me please?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;jQuery UI Accordion - Collapse content&lt;/title&gt;
      &lt;script src="jquery-1.7.1.js"&gt;&lt;/script&gt;
      &lt;script src="ui/jquery.ui.core.js"&gt;&lt;/script&gt;
      &lt;script src="ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
      &lt;script src="ui/jquery.ui.accordion.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(function() {
          $( "#accordion" ).accordion({
              collapsible: true,
              animated: false,
              active: false,
              autoHeight: false
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="demo"&gt;
      &lt;div id="accordion"&gt;
  
      &lt;div style="float:left; width:50%;"&gt;
          &lt;li&gt;&lt;a href="#"&gt;TITLE 1&lt;/a&gt;
          &lt;p&gt;TEXT 1&lt;/p&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;TITLE 2&lt;/a&gt;
          &lt;p&gt;TEXT 2&lt;/p&gt;&lt;/li&gt;
      &lt;/div&gt;
  
      &lt;div style="float:left; width:50%;"&gt;
          &lt;li&gt;&lt;a href="#"&gt;TITLE 3&lt;/a&gt;
          &lt;p&gt;TEXT 3&lt;/p&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;TITLE 4&lt;/a&gt;
          &lt;p&gt;TEXT 4&lt;/p&gt;&lt;/li&gt;
      &lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- End accordion --&gt;
  &lt;/div&gt;&lt;!-- End demo --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>