bootstrap 3 - collapse 'jump' behaviour
The Jump in your collapse is due to .well (margin) class CSS.
.well class adds margin-bottom: 20px; which causes jump when the collapse gets display:none property. And the padding of .well also plays role in this jump.
To make it collapse smoother, add the .well class inside the .collapse DIV
as shown below, and this CSS.
To escalate it quickly, .well class adds margin-bottom, padding, and min-height which causes jump, as it affects the box-model on display:none.
.refine-search-collapse-container .well {
margin-bottom: 0;
}<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">
Refine Search
<span class="caret"></span>
</button>
<div class="collapse refine-search-collapse-container" id="refine-search">
<form class="form-horizontal well">
<div class="form-group">
<div class="col-sm-6">
<select class="form-control">
<option value="">ad</option>
<option value="">sfsd</option>
<option value="">sdf</option>
<option value="">sf</option>
<option value="">sdf</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control">
<option value="">Blah1</option>
<option value="">Blah2</option>
<option value="">Blah3</option>
<option value="">Blah4</option>
<option value="">Blah5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<input type="number" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<select class="form-control">
<option value="">Yes</option>
<option value="">No</option>
</select>
</div>
</div>
</form>
</div>
<div class="">
<h3>Search Result</h3>
</div>I have updated your fiddle go through below link may be it can help you.
JSFiddle
Put your well class with form element and just add below CSS
CSS Code-
.well{
margin-bottom:0px;
}
You shouldn't have any padding or margins on the collapsible element. This is what is causing the jump effect.
ie: in your case, it has additional classes which add padding and margins.
<div class="refine-search-collapse-container well collapse">
If you want to preserve all the current styles such as .well etc, it's best to wrap your existing collapsible element around another tag and make the parent div the collapsible element,
See updated example:
In your case you would need a .clearfix on the collapsible element since it has a child that will overflow because of the .well class
http://jsfiddle.net/vuk1dbag/19/