jQuery show/hide is collapsing on page load

Question

All the div in the middle is collapsing on page load everytime i refresh the page and the first div is going up and down one time on page load/refresh.

How do i prevent that so the page doesn't make this kind of "collapse animation" on page load and still keep the slideUp/slideDown function?

I'm using jQuery 1.11.0 with migrate 1.2.1

Link to demo page

$(document).ready(function() {
    $(function() {
        $('h3 + div').hide('slow/400/fast');
        $('h3:first').next().show('slow/400/fast');


        var $buffer = $('h3:first');

        $('#content h3').click(function() {

            var style_disp =$buffer.next().css('display');

            $(this).next().slideDown('slow/400/fast');
            if (style_disp == 'block') {
                $buffer.next().slideUp('slow/400/fast');
            }
            $buffer = $(this);
        });
    });
});

Answer 1

Firstly, you have 2 document ready functions which is not necessary. $(function() { is shorthand for $(document).ready(function() { so you can go ahead and remove one of those as they do the same thing.

Secondly, the options you are passing to the hide()/show() functions are incorrect. You should only be passing one speed and you are currently passing 3 different speeds.

Finally, you are hiding/showing divs on page load using jQuery, instead you should be hiding the divs you want to be hidden, on page load, via CSS and only use jQuery to toggle visibility on click.