JQuery .toggle('Slide') is not displaying my content
<p>I'm making a Social Media links for a website, but what supposed to happen is once a user hovers over the Icon is slides out on the right hand side of the Social Media/Link icon.
I have this JQuery code that controls what happens on a users hover:</p>

<pre><code>$("#share").hover(function() {
      $("#social-icon-content").toggle('slide');
      $("#share a").animate({opacity:'1'}, 1);
      $("#share-button").animate({opacity:'1'}, 1);
    });
</code></pre>

<p>When looking in the console of Google chrome it shows that is is sliding the content but after it finishes sliding nothing happens and it switches from <code>display: none;</code> to <code>display: block;</code>.</p>

<p>Here is a link to the <a href="https://jsfiddle.net/he7cq201/#&amp;togetherjs=zTodlRlAJ8" rel="nofollow">JSFiddle</a> if you'd like to see more.</p>