Search code examples
twitter-bootstrapcssjquery-ui-accordion

Bootstrap Grid with Accordian pushes bottom cell to the right

I have this 2x2 grid in Bootstrap with a simple accordion in each cell. Upon expanding the first accordion under cell A, it pushes the cell C to the right.

Is there a way to prevent this behavior, and keep cell C under cell A when clicking the Accordion?

Link to the code: https://plnkr.co/edit/BRqwLeGqAlqLSvWFQVQL?p=info

JavaScript:

 <script>
    $(function() {
      $(".accordion").accordion({
        collapsible: true,
        active: false
      });
    });
  </script>

HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <span>A</span>
      <div class="accordion">
        <h3>Section 1</h3>
        <div>
          <p>Mauris mauris ante, blandit et</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <span>B</span>
      <div class="accordion">
        <h3>Section 1</h3>
        <div>
          <p>Mauris mauris ante, blandit et</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <span>C</span>
      <div class="accordion">
        <h3>Section 1</h3>
        <div>
          <p>Mauris mauris ante, blandit et</p>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <span>D</span>
      <div class="accordion">
        <h3>Section 1</h3>
        <div>
          <p>Mauris mauris ante, blandit et</p>
        </div>
      </div>
    </div>
  </div>
</div>
Solution

  • Yes this can be done change the html a bit like this

    <body>
 <div class="container">
  <div class="">
   <div class="col-xs-6">
    <div class="row">
      <span>A</span>
      <div class="accordion">
      <h3>Section 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et</p>
      </div>
    </div>
    </div>
    <div class="row">
      <span>C</span>
      <div class="accordion">
      <h3>Section 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et</p>
      </div>
    </div>
    </div>
  </div>

  <div class="col-xs-6">
    <div class="row">
    <span>B</span>
    <div class="accordion">
      <h3>Section 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et</p>
      </div>
    </div>
    </div>
    <div class="row">
    <span>D</span>
    <div class="accordion">
      <h3>Section 1</h3>
      <div>
        <p>Mauris mauris ante, blandit et</p>
      </div>
    </div>
    </div>
  </div>
</div>

    and change the CSS like this 

     <style>
.col-xs-12 {
  background-color: blue;
  color: white;
  text-align: center;
  border: 1px solid black;
}

.col-xs-6 {
  background-color: yellow;
  color: black;
  text-align: center;

}
.col-xs-6 .row{
  border: 1px solid black;
  padding: 15px 15px 0px 15px;
}