Fixed Button Slide Toggle

by Denis Tverdokhlebov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="buttons">
  <div  id="phone" class="button">
    <a href="#" id="btn"><i class="fa fa-phone fa-2x"></i></a>
  </div>
  <div id="div1" class="slide">
    <a href="tel:+1+555+5555">555-555-5555</a>
  </div>
  
  <div id="email" class="button" >
    <a href="#" id="btn2"><i class="fa fa-envelope fa-2x"></i></a>
  </div>
  <div id="div2" class="slide" style="display:none">
    <a href="tel:+1+555+5555">555-555-5555</a>
  </div>
</div>

CSS

.buttons {
  margin-top: 10px;
}
.buttons .button, .buttons #div1 {
  -webkit-box-shadow: 1px 1px 1px 1px rgba(43, 43, 43, 0.2);
  -moz-box-shadow: 1px 1px 1px 1px rgba(43, 43, 43, 0.2);
  box-shadow: 1px 1px 1px 1px rgba(43, 43, 43, 0.2);
}

.button {
  position: absolute;
  right: 0px;
  float: right;
  background-color: #F30;
  padding: 16px;
  height: 60px;
  display: block;
  width: 60px;
  border-radius: 30px 0 0 30px;
  overflow: hidden;
  z-index: 10;
}

.slide {
  padding: 16px 15px 15px 20px;
  position: absolute;
  display: none;
  float: right;
  right: 0;
  display: none;
  width: 200px;
  height: 60px;
  background-color: #F30;
  color: #FFF;
  text-align: left;
  font-size: 18px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 30px 0 0 30px;
}

#div2 {
  top: 80px;
  background-color: GREY;
}

#email {
  background-color: GREY;
  top: 80px;
}

.button i {
  color: #fff;
}

#div1 a, #div1 a:visited, #div1 a:active, #div1 a:focus, #div2 a, #div2 a:visited, #div2 a:active, #div2 a:focus {
  color: #fff;
  text-decoration: none;
}
#div1 a:hover, #div2 a:hover {
  color: #ccc;
}

JavaScript

$('#btn').click(function() {   
    $('#div1').animate({width:'toggle'},250);
});

$('#btn2').click(function() {   
    $('#div2').animate({width:'toggle'},250);
});