Slide Right to Left and Left to Right (Not working)

I am wondering why JSFIDDLE is perfectly working but in my server, it doesn't work. Have a look at the following code below:

HTML

<div class="project">
    <div class="project-col2">
        <div class="project-mid-box">
            <ul>
                <a class="myButton"> <li> Project List 1  </li> </a> 
                <a class="myButton"> <li> Project List 2  </li> </a> 
            </ul>
        </div>
    </div>

    <div class="project-col3 myDiv">
        <div class="project-mid-box">
            <p> HERE </p>
        </div>
    </div>  

</div>

CSS

.project {overflow:hidden;}
.project h3 {color:#FFF;font-weight:normal;}
.project-col2 {float:left;width:50%;position:relative;}
.project-col3 {float:left;width:30%;position:relative;}
.project-mid-box {padding-left:10px;}
.project-mid-box ul li {border:1px solid #CCC;margin:2px 0;border-radius:5px;padding:5px;line-height:25px;}
.project-mid-box ul li:hover {background-color:#f7f7f7;
.myDiv {display:none;}

JS -- I have added a function because in JSfiddle is automatically added.

<script type="text/javascript">
$(document).ready(function() { 
    $(".myButton").click(function () {
        // Set the effect type
        var effect = 'slide'; 
        // Set the options for the effect type chosen
        var options = { direction: 'right' };
        // Set the duration (default: 400 milliseconds)
        var duration = 700;
        $('.myDiv').toggle(effect, options, duration);
    });
})  
</script>

Lastly, i didn't forget to get external source jquery library

<script src="http://ift.tt/1vj7BKb"> </script>

It should be totally working on my server, but it's not working at all. Am I missing something?