Toggle animation in jquery

Question

I am having trouble achieving something.

I need to make a social media side bar and when I press on an item a bar slides from left to right with more details in it.

See pictures for examples

Here is the 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> 

Answer 1

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

---

open detail by Click( 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> 

---

open detail by Mouse Over( 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> 

Answer 2

Try using css before jumping 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>