JSFiddle - React, Tailwind, and code Playground
HTML
<div id="socialmediabar">
<ul>
<li><a class="addthis_button_facebook" title="Facebook" href="http://www.facebook.com/emccorp" class="facebook"></a></li>
<li><a class="addthis_button_twitter" title="Twitter" href="https://twitter.com/emccorp" class="twitter"></a></li>
<li><a class="addthis_button_linkedin" title="Linkedin" href="http://www.linkedin.com/company/emc?trk=hb_tab_compy_id_1128" class="linkedin"></a></li>
<li><a class="addthis_button_email" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a></li>
<div id="hideaway" style="display:none;">
<table>
<tr>
<td>
<div id="sidebarShareLinks">
<a class="addthis_button_pdfmyurl" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="addthis_button_email" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="addthis_button_linkedin" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="addthis_button_twitter" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="addthis_button_facebook" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="addthis_button_print" addthis:url="/" addthis:title="EMC Homepage" addthis:description="The EMC Homepage Description"></a>
<a class="gplus-custom at300b" title="Google Plus" href="javascript:return addthis_sendto(\'google_plusone_share\');" onclick="return addthis_sendto('google_plusone_share');">
<img style="float:left;" src="../../../R1/images/EMC_Image_C_1306517211388_g.jpg" width="18" height="18" border="0" alt="Google Plus" />
<span class="at300m"...
CSS
#socialmediabar {
background: none repeat scroll 0 0 #F5F5F5;
border: 2px solid #DBDBDB;
border-radius: 7px 0 0 7px;
height: 135px;
position: fixed;
right: 0;
top: 250px;
width: 28px;
z-index: 1000;
}
#socialmediabar ul {
list-style: none outside none;
margin: 0;
padding: 10px 0 2px;
}
#socialmediabar ul li {
margin: 0 5px 8px;
position: relative;
text-indent: -9999px;
}
#socialmediabar ul li a {
display: block;
height: 16px;
width: 16px;
}
#socialmediabar ul li a.facebook {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -16px 0 rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.facebook:hover {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -32px -16px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.twitter {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -16px -32px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.twitter:hover {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll 0 -32px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.linkedin {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -32px 0 rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.linkedin:hover {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll 0 -16px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.google {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -16px -16px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.google:hover {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll -32px -32px rgba(0, 0, 0, 0);
}
#socialmediabar ul li a.share {
background: url("/R1/images/EMC_Image_C_1306531147187_socialmediabar.png") no-repeat scroll 0 -48px rgba(0, 0, 0, 0);
cursor:...
JavaScript
<script src="//s7.addthis.com/js/250/addthis_widget.js?pub=ra-4d70fb56582d1bec"</div>
<style>
<script type="text/javascript">
$j(document).ready(function() {
$j('#socialmediabar #sideBarPlusBtn, #socialmediabar .sidebarShareLinksClose a').live('click', function() {
ShareLinksShowHide('sidebarShareLinks');
});
});
function ShareLinksShowHide(divID) {
$j('#' + divID).closest('.shareIcon').toggleClass('hideShareLink');
}