jQuery - slideToggle animation not smooth

Question

I am trying to make divs below links to slide up and down animated on link click, but the animation is not smooth at all, on slide up it just jumps the final distance. Here is the code:

HTML:

<div>
<a href="#" id="may2016" class="month_name"><h2>May 2016</h2></a>
                <div class="archive_links" style="display:none;">
                    <p>Hello, 30. May 2016. 17:33</p>
                    <p>New One, 22. May 2016. 11:14</p>
                    <p>Third, 17. May 2016. 04:30</p>
                </div>
</div>
<div>
            <a href="#" id="april2016" class="month_name"><h2>April 2016</h2></a>
                <div class="archive_links" style="display:none;">
                    <p>Hello, 30. May 2016. 17:33</p>
                    <p>New One, 22. May 2016. 11:14</p>
                    <p>Third, 17. May 2016. 04:30</p>
                </div>
</div>

CSS:

div.archive_links {
            background:rgba(255,255,255, .15);
            padding:5px;
        }

        a.month_name {
            text-decoration:none;
            color:white;
            transition:color .4s ease;
        }

        a.month_name:hover {
            color:#c7c7ee;
            transition:color .4s ease;
        }

JavaScript:

$(document).ready(function() { 
        $("#may2016").on('click', function() {
            $(this).next(".archive_links").slideToggle(1000);  
        });

        $("#april2016").on('click', function() {
            $(this).next(".archive_links").slideToggle(1000);  
        });
    });

Here is the jsFiddle . Can someone help?

Answer 1

I see it fine. The only detail is the little "jump" at the beginning. This happens because the margins of the p appear immediately when jQuery sets display to block in the target. You should try to remove the margins or to put the p inside a div and animating the div instead.