I try to achieve the same animation with jQuery animate for social sharing what this [site](https://www.celine.com/en) uses in footer when you click on Share.

I was trying to build the animation but the list on toggle does not behave as expected.

my markup

```
<div id="social-media">
<a href="#" class="social-shares"> SHARE</a>

<ul class="social-media-channels">
  <li><a href="">Facebook</a></li>
  <li><a href="">Twitter</a></li>
  <li><a href="">Google+</a></li>
</ul>
</div> 

```

CSS

```
#social-media {
  margin: 0 auto;
  width: 500px;
}
#social-media a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
}
#social-media a:hover {
  color: silver;
}
#social-media .social-shares {
  float: right;
}
#social-media ul.social-media-channels {
  margin: 0;
  padding: 0;
  position: relative;
  float: right;
  margin-right: 15px;
  display: none;
}
#social-media ul.social-media-channels li {
  display: inline;
}

```

jQuery

```
$(document).ready(function() {
  $('.social-shares').on('mouseover', function() {
    $('.social-media-channels').animate({
      width: 'toggle'
    }, 350);
  })
})

```

[here](http://codepen.io/lgt/pen/vOJMQM) is my codepen