title: Accordion inside popup, colorbox / modal Bootstrap
body: <p>I want to achieve an accordion inside popup. Is it possible?
  I tried to do it with colorbox, but seems it's not feasible, so I try to use bootstrap modal, but seems I got confused.</p>
  
  <pre><code>&lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Bootstrap 3.1.0 - Modal Demo&lt;/title&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
           $(document).ready(function() {
           $("#accordion").accordion({ autoHeight: true });
      });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h2 style="text-align: center;"&gt;Bootstrap 3.1.0 - Modal Demo&lt;/h2&gt;
          &lt;div class="row text-center"&gt;
              &lt;h3&gt;The Basic Modal&lt;/h3&gt;
              &lt;a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal"&gt;Click to open Modal&lt;/a&gt;
          &lt;/div&gt;
          &lt;hr&gt;
      &lt;/div&gt;
  
      &lt;div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div id="accordion"&gt;
            Text / content outside accordion
      &lt;h3&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;
          &lt;p&gt;
          Inside section 1
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;h3&gt;&lt;a href="#"&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
      &lt;div&gt;
          &lt;p&gt;
          Inside section 2
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My full code : <a href="http://jsfiddle.net/g6HA4/2/" rel="nofollow">http://jsfiddle.net/g6HA4/2/</a></p>
  
  <p>Thanks for any help.</p>