html - Bootstrap collapse expanding too far when first clicked -

the following jsfiddle has 2 collapse panels. however, when each window expanded , collapsed, animation awkward , not fluid--it expands larger needs @ first, input fields contained therein not visible, , input fields appear suddenly.

https://jsfiddle.net/6pmsp9ou/

this appears happen when window above width. if viewing window made less wide, expands normally. can seen in jsfiddle, appears expand , collapse @ default width, if widen viewing window, behavior described above observed.

how can expand , collapse normally?

<div id='ah-body'>   <div style='max-height:500px;overflow-y:auto;'>     <a href='#section1' class='collapse-header col-sm-12' data-toggle='collapse'>section 1</a>     <div id='section1' class='collapse'>       <div class='input-wrapper required col-sm-12 col-md-6'>         <label for='field1'>field 1</label>         <input id='field1'>       </div>       <div class='input-wrapper required col-sm-12 col-md-6'>         <label for='field2'>field 2</label>         <input id='field2'>       </div>       <div class='input-wrapper col-sm-12 col-md-6'>         <label for='field3'>field 3</label>         <input id='field3'>       </div>       <div class='input-wrapper col-sm-12 col-md-6'>         <label for='field4'>field 4</label>         <input id='field4'>       </div>       <div class='input-wrapper required col-sm-12 col-md-6'>         <label for='field5'>field 5</label>         <input id='field5'>       </div>       <div class='input-wrapper required col-sm-12 col-md-6'>         <label for='field6'>field 6</label>         <input id='field6'>       </div>       <div class='input-wrapper col-sm-12 col-md-6'>         <label for='field7'>field 7</label>         <input id='field7'>       </div>       <div class='input-wrapper col-sm-12 col-md-6'>         <label for='field8'>field 8</label>         <input id='field8'>       </div>       <div class='input-wrapper col-sm-12 col-md-6'>         <label for='field9'>field 9</label>         <input id='field9'>       </div>     </div>   </div>   <a href='#section2' class='collapse-header col-sm-12' data-toggle='collapse'>section 2</a>   <div id='section2' class='collapse'>     <div class='input-wrapper required col-sm-12 col-md-6'>       <label for='field10'>field 10</label>       <input id='field10'>     </div>     <div class='input-wrapper required col-sm-12 col-md-6'>       <label for='field11'>field 11</label>       <input id='field11'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field12'>field 12</label>       <input id='field12'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field13'>field 13</label>       <input id='field13'>     </div>     <div class='input-wrapper required col-sm-12 col-md-6'>       <label for='field14'>field 14</label>       <input id='field14'>     </div>     <div class='input-wrapper required col-sm-12 col-md-6'>       <label for='field15'>field 15</label>       <input id='field15'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field16'>field 16</label>       <input id='field16'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field17'>field 17</label>       <input id='field17'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field18'>field 18</label>       <input id='field18'>     </div>     <div class='input-wrapper col-sm-12 col-md-6'>       <label for='field19'>field 19</label>       <input id='field19'>     </div>   </div> 

you need remove class col-sm-12 in section headers.

explaination:

chilly's answer explains why collapse-header class conflicts predefined grid classes (ex: col-sm-12) , goes on how grid system should implemented. code below doesn't use class row because answer addresses op's question workaround. please @ official documentation here know more proper usage of grid system.

snippet:

<a href='#section1' class='collapse-header' data-toggle='collapse'>section 1</a> <a href='#section2' class='collapse-header' data-toggle='collapse'>section 2</a> 

link working jsfiddle

full code:

#ah-body {    margin: 0 10% 0 10%;  }  #ah-body .collapse-header {    color: black;    cursor: pointer;    display: block;    font-size: 22px;    font-weight: bold;    text-decoration: none;    position: relative;  }  #ah-body .collapse-header:after {    content: '-';    font-size: 30px;    margin: 0 0 0 60%;  }  #ah-body .collapse-header[aria-expanded='true']:after {    content: '+';  }  #ah-body .input-wrapper label {    display: block;  }  #ah-body .input-wrapper.required label:after {    color: #f00;    content: '*';  }  #ah-body input {    border: 1px solid #bbb;  }  #ah-body .input-wrapper {    margin: 0 auto 0 auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  <div id='ah-body'>    <div style='max-height:500px;overflow-y:auto;'>      <a href='#section1' class='collapse-header' data-toggle='collapse'>section 1</a>      <div id='section1' class='collapse'>        <div class='input-wrapper required col-sm-12 col-md-6'>          <label for='field1'>field 1</label>          <input id='field1'>        </div>        <div class='input-wrapper required col-sm-12 col-md-6'>          <label for='field2'>field 2</label>          <input id='field2'>        </div>        <div class='input-wrapper col-sm-12 col-md-6'>          <label for='field3'>field 3</label>          <input id='field3'>        </div>        <div class='input-wrapper col-sm-12 col-md-6'>          <label for='field4'>field 4</label>          <input id='field4'>        </div>        <div class='input-wrapper required col-sm-12 col-md-6'>          <label for='field5'>field 5</label>          <input id='field5'>        </div>        <div class='input-wrapper required col-sm-12 col-md-6'>          <label for='field6'>field 6</label>          <input id='field6'>        </div>        <div class='input-wrapper col-sm-12 col-md-6'>          <label for='field7'>field 7</label>          <input id='field7'>        </div>        <div class='input-wrapper col-sm-12 col-md-6'>          <label for='field8'>field 8</label>          <input id='field8'>        </div>        <div class='input-wrapper col-sm-12 col-md-6'>          <label for='field9'>field 9</label>          <input id='field9'>        </div>      </div>    </div>    <a href='#section2' class='collapse-header' data-toggle='collapse'>section 2</a>    <div id='section2' class='collapse'>      <div class='input-wrapper required col-sm-12 col-md-6'>        <label for='field10'>field 10</label>        <input id='field10'>      </div>      <div class='input-wrapper required col-sm-12 col-md-6'>        <label for='field11'>field 11</label>        <input id='field11'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field12'>field 12</label>        <input id='field12'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field13'>field 13</label>        <input id='field13'>      </div>      <div class='input-wrapper required col-sm-12 col-md-6'>        <label for='field14'>field 14</label>        <input id='field14'>      </div>      <div class='input-wrapper required col-sm-12 col-md-6'>        <label for='field15'>field 15</label>        <input id='field15'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field16'>field 16</label>        <input id='field16'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field17'>field 17</label>        <input id='field17'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field18'>field 18</label>        <input id='field18'>      </div>      <div class='input-wrapper col-sm-12 col-md-6'>        <label for='field19'>field 19</label>        <input id='field19'>      </div>    </div>