Toggle animation in jquery

Question

I have problems achieving something.

I need to create a panel on the side of social networks, and when I click on an element, the panel moves from left to right with more detailed information.

See pictures for examples.

Here is a snippet of my current code:

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
    margin-top:10px;
}

.icon-bar-social a {
    display: block;
    text-align: center;
    padding: 6px;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar-social a:hover {
    background-color: #F4D7CB;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">




<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i></a>
    <a href="#"><i class="fa fa-instagram"></i></a>
    <a href="#"><i class="fa fa-envelope"></i></a>
    <a href="#"><i class="fa fa-phone"></i></a>
</div>

Run codeHide result

Answer 1

You do not need jQuery. use this problem better than CSS

---

open parts by clicking ( focus)

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
     
}
.icon-bar-social a {
    display: block;
    text-align: center;
    color: white;
    font-size: 36px;
    padding:6px;
}
.icon-bar-social a span {
    position: absolute;
    background-color: pink;
    text-align: center;
    height: 55px;
    width: 0px;
    left: 60px;
    color:#6D565E;
   overflow: hidden;
   margin-top:-6px;
}

.icon-bar-social a:hover {
  	background-color: #F4D7CB;
}
.icon-bar-social a:focus i + span {
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 1s;
 animation-fill-mode: both;     
}
@-webkit-keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

/* Standard syntax */
@keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i><span>facebook</span></a>
    <a href="#"><i class="fa fa-instagram"></i><span>instagram</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>envelope</span></a>
    <a href="#"><i class="fa fa-phone"></i><span>phone</span></a>
</div>

Run codeHide result

---

open parts with the mouse ( hover)

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
     
}
.icon-bar-social a {
    display: block;
    text-align: center;
    color: white;
    font-size: 36px;
    padding:6px;
}
.icon-bar-social a span {
    position: absolute;
    background-color: pink;
    text-align: center;
    height: 55px;
    width: 0px;
    left: 60px;
    color:#6D565E;
   overflow: hidden;
   margin-top:-6px;
}

.icon-bar-social a:hover {
  	background-color: #F4D7CB;
}
.icon-bar-social a:hover i + span {
 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
 -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
 animation-name: example;
 animation-duration: 1s;
 animation-fill-mode: both;     
}
@-webkit-keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

/* Standard syntax */
@keyframes example {
    0%   {width: 0px;}
    100% {width: 200px;}
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
    <a href="#"><i class="fa fa-facebook"></i><span>facebook</span></a>
    <a href="#"><i class="fa fa-instagram"></i><span>instagram</span></a>
    <a href="#"><i class="fa fa-envelope"></i><span>envelope</span></a>
    <a href="#"><i class="fa fa-phone"></i><span>phone</span></a>
</div>

Run codeHide result

Answer 2

Try using css before switching to jQuery. A simple hover selector should solve your problem.

.icon-bar-social {
    width: 60px;
    background-color: #6D565E;
    position:fixed;
    z-index:100;
}

.icon-bar-social a {
    display: block;
    text-align: center;
    padding: 6px;
    position: relative;
    transition: all 0.3s ease;
    color: white;
    font-size: 36px;
}

.icon-bar-social a:hover {
    background-color: #F4D7CB;
}
.icon-bar-social a span { 
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 5px;
    transition: all .25s ease-in-out;
    pointer-events: none;
}
.icon-bar-social a:hover span {
    opacity: 1;
    left: 100%;
    background-color: #F4D7CB;
    pointer-events: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-bar-social">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
        <a href="#"><i class="fa fa-envelope"></i></a>
        <a href="#"><i class="fa fa-phone"></i><span>555.555.5555</span></a>
</div>

Run codeHide result