title: Twitter Bootstrap: How to create a dropdown button with an accordion inside it?
body: <p>In Twitter Bootstrap, I am trying to create a button dropdown with an accordion inside it. </p>
  
  <p>the purpose is to present a long list of items in a concise form (i.e. avoid long scroll-downs by the user). </p>
  
  <p>the straightforward way of including an accordion div inside a dropdown div does not work..: </p>
  
  <pre><code>&lt;div class="dropdown"&gt;
      &lt;a data-toggle="dropdown" href="#"&gt;Dropdown trigger&lt;/a&gt;
      &lt;div class="dropdown-menu" role="menu" aria-labelledby="dLabel" id="accordion"&gt;
      &lt;h3&gt;Unit 1&lt;/h3&gt;
      &lt;div&gt;
        &lt;p&gt;item a&lt;/p&gt;
        &lt;p&gt;item b&lt;/p&gt;
      &lt;/div&gt;
      &lt;h3&gt;Unit 2&lt;/h3&gt;
      &lt;div&gt;
        &lt;p&gt;item c&lt;/p&gt;
        &lt;p&gt;item d&lt;/p&gt;
        &lt;p&gt;item e&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;            
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas how can one implement this?</p>