Slide toggle from right-to-left - JQUERY UI

This is the version #1 of the DEMO

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<a type="button" href="#" class="phone">
&#9742;
<div class="" id="phone">
(000) 000 0000
</div>
</a>

<a type="button" href="#" class="bubble">
&#128172;
<div class="" id="bubble">
How can we help you?
</div>
</a>

<a type="button" href="#" class="email">
&#9993;
<div class="" id="email">
contact@somesite.com
</div>
</a>

CSS

#phone,
#bubble,
#email {
  background: #FFFFFF;
  color: #333333;
  font-size: 18px;
  display: none;
  width: 350px;
  height: 45px;
  float: right;
  margin: 0px 0px 0px 10px;
  padding: 0px 10px 0px 10px;
}

a.phone {
  position: fixed;
  background: #FFB200;
  color: #FFFFFF;
  padding: 0 10px;
  outline: none;
  text-decoration: none;
  top: 109px;
  right: 0;
  padding: 0.4em 2.5em 0.4em 1em;
  line-height: 45px;
  display: block;
}

a.bubble {
  position: fixed;
  background: #FFB200;
  color: #FFFFFF;
  padding: 0 10px;
  outline: none;
  text-decoration: none;
  top: 169px;
  right: 0;
  padding: 0.4em 2.5em 0.4em 1em;
  line-height: 45px;
  display: block;
}

a.email {
  position: fixed;
  background: #FFB200;
  color: #FFFFFF;
  padding: 0 10px;
  outline: none;
  text-decoration: none;
  top: 229px;
  right: 0;
  padding: 0.4em 2.5em 0.4em 1em;
  line-height: 45px;
  display: block;
}

JavaScript

$(".phone").click(function() {

  $("#phone").toggle("slide", {
    direction: "right"
  }, 500);

});

$(".bubble").click(function() {

  $("#bubble").toggle("slide", {
    direction: "right"
  }, 500);

});

$(".email").click(function() {

  $("#email").toggle("slide", {
    direction: "right"
  }, 500);

});