Expand Social Share use jQuery

Make expand and close (toggle) using jQuery script

by Beben Koben

HTML

<div style='position:fixed;bottom:10px;left:10px'>

<div id='socials'>
<ul>
    <li class='facebook'><a href='http://facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426'><span>Facebook</span></a></li>
<li class='twitter'><a href='http://twitter.com/bebenkoben'><span>twitter</span></a></li>
<li class='googleplus'><a href='http://plus.google.com/106979433441667164665'><span>googleplus</span></a></li>
<li class='linkedin'><a href='http://linkedin.com/in/bebenkoben'><span>linkedin</span></a></li>
<li class='youtube'><a href='http://www.youtube.com/user/bebenkoben'><span>youtube</span></a></li>
<li class='flickr'><a href='http://profile.yahoo.com/U5R7EC4DC7F2RIW2TSYD7YN5ZY'><span>flickr</span></a></li>
<li class='vimeo'><a href='http://beben-koben.myopenid.com'><span>vimeo</span></a></li>
<li class='tumblr'><a href='http://pinterest.com/bebenkoben'><span>tumblr</span></a></li>
<li class='deviantart'><a href='http://snipplr.com/users/BebenKoben'><span>deviantart</span></a></li>
<li class='skype'><a href='http://about.me/beben-koben'><span>skype</span></a></li>
</ul>
</div>
<span id='sharebbn'></span>
    
</div>

CSS

body {background: #000}

#sharebbn {
background: #333;
color: #ABABAB;
cursor: pointer;
float: left;
font-size: 25px;
font-weight: normal;
line-height: 38px;
padding: 0 20px;
text-transform: uppercase;
}
#sharebbn:before {
content: "\271A";
}
.expand:before {
content: "\2716" !important;
color: #FF7800;
}
#socials {
display: block;
float: left;
text-align: right;
background: #333;
}
#socials ul {
display: block;
height: 38px;
margin: 0;
padding:0;
}
#socials li {
display: inline-block;
float: left;
width: 32px; 
height: 32px;
opacity: 0.2;
margin-top: 2.5px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#socials li:hover {
opacity: 1;
background-position: 0 -32px
}
#socials li a {
display: inline-block;
width: 32px; 
height: 32px;
}
#socials li a span {display:none;}
#socials li.facebook{ background-image:url(http://1.bp.blogspot.com/-sbybihVrVuc/UHOTA49XRvI/AAAAAAAAEFY/08OCFvAm_wE/s64/facebook.png); }
#socials li.twitter{ background-image:url(http://1.bp.blogspot.com/-NskGHQfbyOA/UHOTDD3zdjI/AAAAAAAAEF4/sjChvedQgB8/s64/twitter.png); }
#socials li.linkedin{ background-image:url(http://1.bp.blogspot.com/-iwc7BZN6aAo/UHOTBxWKMSI/AAAAAAAAEFk/acmiao2JW-k/s64/linkedin.png); }
#socials li.tumblr{ background-image:url(http://1.bp.blogspot.com/-oceB8nmgiZ0/UHOTC4MmfwI/AAAAAAAAEF0/sbbGNL4ZTeg/s64/tumblr.png); }
#socials li.vimeo{ background-image:url(http://1.bp.blogspot.com/-apJrWCzYm-A/UHOTDZALThI/AAAAAAAAEGA/SpSImNuMR5I/s64/vimeo.png); }
#socials li.skype{ background-image:url(http://1.bp.blogspot.com/-HunH1J-7iZk/UHOTCtdNsFI/AAAAAAAAEFw/Pu2WkzQWNhU/s64/skype.png); }
#socials li.youtube{ background-image:url(http://1.bp.blogspot.com/-WtmigBJcc7g/UHOTDv29ObI/AAAAAAAAEGE/vVRRs-RkzBs/s64/youtube.png); }
#socials li.googleplus{ background-image:url(http://1.bp.blogspot.com/-mpeEl_TsIio/UHOTBq0XpmI/AAAAAAAAEFo/JeTzX9DWfbE/s64/googleplus.png); }
#socials li.deviantart{...

JavaScript

var $content = $("#socials").hide();
	$("#sharebbn").click(function(){
	$("#socials").toggle(500);
	$(this).toggleClass("expand");
});

/*
Read here:
http://beben-koben.blogspot.com/2014/04/make-expand-toggle-social-links-use-jquery.html
*/