javascript - Bootstrap search expand not working if tabbed pane directly below it -

i trying use advanced drop down search provided here http://bootsnipp.com/snippets/featured/advanced-dropdown-search

the problem dropdown doesnt work in existing page setup. have bootstrap tabbed panel sitting right underneath search box div

<div class="tabbable" id="indextabs"> <ul class="nav nav-tabs" id="mytabs">     {% index in allindexes %}     {% set href = '#'+(index) %}     {% if loop.index == 1 %}         <li><a href={{href}}  class="active" data-toggle="tab">{{index|title}}</a></li>     {% else %}         <li><a href={{href}} data-toggle="tab">{{index|title}}</a></li>     {% endif %}             {% endfor %} </ul>  <div class="tab-content">     {% index in allindexes %}     {% set href = '#'+(index) %}     {% if loop.index == 1 %}         <div class="tab-pane active" id={{index}}>ajax request failed :(</div>     {% else %}         <div class="tab-pane" id={{index}}>ajax request failed :(</div>     {% endif %}             {% endfor %} </div> </div> 

if not have tabbable class , use generic div content, works fine. problem has having tabbed panes. thoughts on how resolve it. ideally tabbed panes slide down page smoothly once drop down on search box clicked. knowledge of css rudimentary. thanks