How add slide up/down effect to a div?

Question

I'm using asp.net mvc5 with razor engine .I want to add slide up and slide down effects to a div . I spend many hours today to do it but I couldn't. I used a lots of jquery codes but they didn't work . I don't know why Jquery didn't work in my project . I'm very confused . please help me how can I add slide up slide down effects to this code? here's my code :

<script type="text/javascript">
    var button = document.getElementById('btnShow');
    button.onmouseover = function () {
    var div = document.getElementById('MyFooter');
    div.style.display = 'block';
  };
</script>

<script type="text/javascript">
    var button = document.getElementById('btnHide');
    button.onmouseover = function () {
    var div = document.getElementById('MyFooter');
    div.style.display = 'none';
          };
</script>

Thanks .

Answer 1

Using jQuery you can do it like following. This code snippet may help you.

 $('#btnShow').mouseover(function() { $('#MyFooter').slideDown(); }); $('#btnHide').mouseover(function () { $('#MyFooter').slideUp(); }); 

 #MyFooter { height: 200px; width: 200px; border: 1px solid #000; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="btnShow" value="Show"/> <input type="button" id="btnHide" value="Hide"/> <br/><br/> <div id="MyFooter"></div> 

Update: You have too many script tag. Your script section should like following. This may solve your problem.

@section scripts{
     <script type="text/javascript">
        $(document).ready(function () {
           $("footer").hide();

           $('#btnShow').mouseover(function () {
               $('#MyFooter').slideDown();
           });

           $('#btnHide').mouseover(function () {
               $('#MyFooter').slideUp();
           });
        });
    </script>
}