title: bootstrap panel collapse causing fade in
body: <p>I am using the collapse property for a series of panels on a website.  Instead of just adding text, I am adding an image along with a title and information about what a viewer will see if they click on the panel.  I am trying to make this responsive and I noticed when I start shrinking the web browser the info of what the viewer will see is getting thrown under the image.  My code looks like this: </p>
  
  <pre><code>&lt;div class="panel-group" id=:"accordion"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;div class="panel-title"&gt;
          &lt;a href="#content" data-toggle="collapse" data-parent="#accordion"&gt;
            &lt;img src="img/foo.jpg" class=col-md-2 img-responsive" alt="yeah"&gt;
            &lt;div class="col-md-10"&gt;
              &lt;h4&gt;hello&lt;/h4&gt;
              &lt;p&gt;World&lt;/p&gt;
            &lt;/div&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-collapse collapse"&gt;
      &lt;div class="panel-body"&gt;
        &lt;!--content --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;!-- and so on and so on --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>doing this allows the panels to be responsive to the shrinking of the browser, but when I click to collapse and show the panel body, it is causing a jQuery fadeIn effect saw opposed to automatically showing the content.  It's not that it looks terrible, but the fadeIn is slow and I do not like how it is working.</p>
  
  <p>Any help would be gratefully received.  Thanks.</p>