Javascript jqueryui滑动问题

我正在尝试使用jQuery和jQueryUI创建一个带有社交媒体图标的About页面

我使用的三个图标都是由Wonder提供的：Facebook、Linkedin和Mail。我正在尝试创建一个界面，该界面将滑开至左侧文本，说明图标所代表的社交网络

现在的情况是，文本移动到一个单独的行，然后关闭，我绝对不希望这样。对我来说，在Google Chrome的Mac上，下面提供的JSFIDLE，它没有动画，出于一些奇怪的原因

虽然我过去经常使用jQuery，但我以前从未使用过jQueryUI，现在有点痛苦

查看JSFiddle

我现在的Javascript：

$(document).click(function() {
    $( "#1" ).toggle( "slide" );
});

尝试更改：

$( "#1" ).toggle("slide");

致：

---

有没有更顺畅的方法？由于它是文本，所以它在垂直和水平方向上都会打开。。。有没有办法只能水平打开？

 $(document).click(function() {
      $( "#1" ).toggle("slow" );
    });