title: Bootstrap v2.3.2 menu changes size after opening/closing it
body: <p>The goal its to have a menu activated by a button.</p>
  
  <p>This menu can have any type of content inside, so it must adapt according to its content. </p>
  
  <p>In this example i have an accordion, but could be just a grid, or a form, since i'm making it as a bootstrap/jquery widget. </p>
  
  <p>The problem is that the menu changes size after opening and closing it several times.</p>
  
  <p>How can i improve it to make it adaptable to content and consistent, regarding that it will accept different contents. </p>
  
  <p>Code
  <a href="http://jsfiddle.net/fpmsusm5/" rel="nofollow">http://jsfiddle.net/fpmsusm5/</a></p>
  
  <p>Javascript:</p>
  
  <pre><code>var button = $('#button');
  var dialog = $('#modal');
  button.on('click', function () {
      dialog.toggleClass('hide');
      dialog.position({
          my: "right top",
          at: "right-2 bottom",
          of: button
      });
  })
  
  
  $("#openpanel1").on("click", function () {
      var curr_panel = $("#panel1")
      curr_panel.toggleClass('show hide');
      curr_panel.collapse(curr_panel.hasClass('show') ? 'show' :     'hide');
  });
  
  ...
  
  /* ensure any open panels are closed before showing selected */
  $('#accordion').on('show.bs.collapse', function () {
      $('#accordion .in').collapse('hide');
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="pull-right"&gt;
      &lt;a id="button" class="btn"&gt;Settings&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="modal" class="modal hide" style="overflow-    y:hidden;width:auto;height:auto;max-height:100%; max-width:100% "&gt;
      &lt;div class="modal-body" style="overflow-y:hidden; width:auto;     height:auto; max-height:100%; max-width:100%"&gt;
          &lt;div id="accordion"&gt;
  
              &lt;button id="openpanel1" type="button" class="btn"     style="width:100%;text-align:left"&gt;&lt;i
                      class="icon-search"&gt;&lt;/i&gt;Page Information
              &lt;/button&gt;
              &lt;div id="panel1" class="collapse"&gt;
                  &lt;div class="panel-body"&gt;
                      Contents panel 1
                  &lt;/div&gt;
              &lt;/div&gt;
  
              ....
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for your insights.</p>