Why is my jquery slider jumpy and laggy? – Photoshop

I have created a slider in jQuery that shows and hides a div upon clicking a button. But the problem is it’s not smooth and it jumps during the slide animation. I’ve tried everything, from changing widths to replacing margins with paddings but nothing is working. Where is the problem?

HTML:

 <button class="show-btn"><a>Show Slider</a></button>

 <!-- slider -->
    <div class="slider" id="slider">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 slider-wrap">
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <ul class="top list-inline dev-icons top">
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-html5-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-css3-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-javascript-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-jquery-plain-wordmark"></i></a></li>
                                </ul>
                                <ul class="bottom list-inline dev-icons">
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-photoshop-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-php-plain"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-laravel-plain-wordmark"></i></a></li>
                                    <li class="col-lg-3 col-md-3 col-sm-3 col-xs-6"><a href="#"><i class="devicon-mysql-plain-wordmark"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

             <button class="hide-btn"><a>Hide</a></button>

            </div>
        </div> <!-- slider end -->

CSS:

.slider {
    text-align: center;
    padding: 40px 0;
    background-color: rgba(24, 188, 156, 0.09);
    box-sizing: border-box;
    display: none;
    border-left: solid 10px #2C3E50;
    border-right: solid 10px #2C3E50;
    border-bottom: solid 10px #2C3E50;
}

.dev-icons {
    font-size: 7em;
}

.slider li a {
    text-decoration: none;
}

.top {
    padding-bottom: 45px;
}

.slider-wrap {
    padding-bottom: 30px;
}

.hide-btn {
    background: none;
    border: 0;
    background-color: #2C3E50;
    padding: 15px 25px;
    border-radius: 10px;
}

jQuery:

$(".show-btn").click(function(){
    $(".slider").slideDown();
    $(this).fadeOut();
}); 

$(".hide-btn").click(function(){
    $(".slider").slideUp();
    $(".show-btn").fadeIn();    
});

//scroll down on the page upon click

$(".show-btn").click(function() {
    $('html, body').animate({
        scrollTop: $(".slider").offset().top + (40)
    }, 500);
});