SlideUp / SlideDown causes a jump

Question

I am using a slideUp and slideDown JQuery slide effect on one of my webpages to get the Basic Search and Advanced Search with More/Less option. It is functioning perfectly. I am using this code. But the problem is when I click more option, it jumps while sliding. But When I use the same in Admin mode (after logging in to website as Admin), it works smoothly. I have tried many methods which I found on Internet, but couldn't work out. Can anyone check my code if it has any problem?

Thanks for your time.

EDIT: When does it jumps? - By default there is a basic search and a "More Option Button" When I click More Option, It slides up the Basic Search and slidesDown the Advanced Search simultaneously, and when slideDown of Advanced Search is about to complete, it suddenly jumps. I hope it makes sense.

EDIT2: Here is the fiddle. This is sample code, As I have some select statements in Advanced Search, we can clearly see when it jumps.

<script>
    jQuery.noConflict();
    jQuery(document).ready(function($) {
        $(".view-filters").hide();
        $(".more").click(function() {

            $(".search-form").slideUp("slow");
            $(".view-filters").slideDown("slow");
        });
        $(".less").click(function() {
            $(".view-filters").slideUp("slow");
            $(".search-form").slideDown("slow");
        });
    });
</script>

<< There is some code here for Search form. >>

<div class = "search-form more"><b>More Options</b> <img src = "images/down_arrow.jpg"></img></div>
<div class = "view-filters less"><b>Less Options</b> <img src = "images/up_arrow1.jpg"></img></div>

<style>
    .search-form
    {
        overflow: hidden;

    }
    .view-filters
    {
        display:block;
    }
    .pager
    {
        display:none;
    }
    table
    {
        display:none;
    }
</style>

<< There is some code here for Advanced Search Form>>

Answer 1

Does the HTML in your jsfiddle model what you really have? It is missing a closing </div> for the "Less Options", but also for each click, you have two elements slide up and two elements slide down. It works much nicer if you have one element slide each way.

Can you nest your elements like this:

<div class="search-form">
There is some code for the basic search here.
<div class="more"><b>More Options</b></div>
</div>

<div class="view-filters">
<div class="less"><b>Less Options</b></div>
There is some code for the advanced search here.
</div>

jsfiddle

Or perhaps even like this.

Answer 2

For anyone who has a similar issue, the overarching problem seems to be in the value of margin on certain elements.

On a page that included Bootstrap 3.3.7 I was using slideUp() on a div that contained an <h3> as well as some other stuff.

The key to stopping the jump that occured as soon as I called slideUp() on the div was to set margin-top:0px on the <h3> it contained.