title: Bootstrap panels side by side - can't line up panel-headings when toggling
body: <p>I've set my bootstrap panels side by side horizontally, like so. I've just applied "display: inline-block" to .panel class, otherwise these panel-headings all default to "block" behavior and just line up vertically, taking up four rows. I want it to stay this way, one row horizontal. </p>
  
  <p><img src="https://i.stack.imgur.com/VYoMn.png" alt="enter image description here"></p>
  
  <p>The problem occurs when I click on one of these panel-headings. I've added a "cursor: pointer" to a heading and it prompts a "collapse("toggle") on click. </p>
  
  <p><img src="https://i.stack.imgur.com/cBG6M.png" alt="enter image description here"></p>
  
  <p>Instead of the panel-body content popping out under the panel-headings, all the other panel-headings slide down and scroll out the page, so I have to manually move down the scrollbar to see other panel-headings. This really sucks. How can I just leave the panel-headings there and only let panel-body content slide down from underneath?</p>
  
  <p>I haven't added much custom JavaScript except for the default Bootstrap js. 
  My code below</p>
  
  <pre><code>&lt;div class="panel-group" id="accordion"&gt;
             &lt;!--COLLAPSIBLE PANELS START HERE --&gt;
        &lt;div id="CollapsiblePanel1" class="panel panel-default"&gt;
        &lt;div href="#collapseOne" class="panel-heading" id="p1"&gt;
           &lt;h4 class="panel-title"&gt;
                 &lt;i class="glyphicon glyphicon-flash"&gt;&lt;/i&gt; TECHNOLOGY
           &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseOne" class="panel-collapse collapse"&gt;
           &lt;div class="panel-body" id="body1"&gt;
                     &lt;p&gt;BLAH BLAH BLAH BLAH &lt;/p&gt;
  
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="CollapsiblePanel2" class="panel panel-default"&gt;
        &lt;div href="#collapseTwo" class="panel-heading" id="p2"&gt;
           &lt;h4 class="panel-title"&gt;
                 &lt;i class="glyphicon glyphicon-book"&gt;&lt;/i&gt; EDUCATION
           &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseTwo" class="panel-collapse collapse"&gt;
          &lt;div class="panel-body"&gt;
                     &lt;p&gt;BLAH BLAH BLAH BLAH &lt;/p&gt;
  
          &lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="CollapsiblePanel3" class="panel panel-default"&gt;
        &lt;div href="#collapseThree" class="panel-heading" id="p3"&gt;
           &lt;h4 class="panel-title"&gt;
                 &lt;i class="glyphicon glyphicon-tasks"&gt;&lt;/i&gt; EXPERIENCE
           &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseThree" class="panel-collapse collapse"&gt;
           &lt;div class="panel-body"&gt;
                  &lt;p&gt;BLAH BLAH BLAH BLAH &lt;/p&gt;
  
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="CollapsiblePanel4" class="panel panel-default"&gt;
        &lt;div href="#collapseFour" class="panel-heading" id="p4"&gt;
           &lt;h4 class="panel-title"&gt;
                 &lt;i class='glyphicon glyphicon-eye-open'&gt;&lt;/i&gt; VISION
           &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapseFour" class="panel-collapse collapse"&gt;
           &lt;div class="panel-body"&gt;
        &lt;p&gt;BLAH BLAH BLAH BLAH &lt;/p&gt;
           &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt; &lt;!-- /bodyContent --&gt;  
  </code></pre>