<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h3>How to create jQuery slide up and down toggle effect</h3>
<p>Click on any of the buttons</p>
<button id = "up"> Slide Up </button>
<button id = "down"> Slide Down</button>
<div class = "target">
<a href="https://tr.pinterest.com/artistmuhittinbudak/muhittins-drawings/">
<img style="border: 5px solid #555;" src = "https://2.bp.blogspot.com/-xR70hPhRcQs/Xq9S3gV3uxI/AAAAAAAAA1g/zTeyOq8VF0U39KZg7Uzuzew3ICat-7s_wCLcBGAsYHQ/s200/ay.jpg" alt = "jQuery" />
</a>
</div>
<div class = "log"></div>
</div>
p {background-color:#bca; width:200px; border:1px solid green;}
$("#down").click(function(){
$(".target").slideDown( 'slow', function(){
$(".log").text('Slide Down Transition Complete');
});
});
$("#up").click(function(){
$(".target").slideUp( 'slow', function(){
$(".log").text('Slide Up Transition Complete');
});
});
