JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="ssba">
    <div style="text-align:left"> 
        <span class="shareText">Share:</span>
        <a class="ssba_facebook_share" href="http://www.facebook.com/sharer.php?u=http://research2.miltonbayer.net/executive-search/" target="_blank"><img src="http://research2.miltonbayer.net/wp-content/plugins/simple-share-buttons-adder/buttons/simple/facebook.png" title="Facebook" class="ssba" alt="Share on Facebook"/></a>
 <a class="ssba_twitter_share" href="http://twitter.com/share?url=http://research2.miltonbayer.net/executive-search/&amp;text=Executive+Search+" target="_blank"><img src="http://research2.miltonbayer.net/wp-content/plugins/simple-share-buttons-adder/buttons/simple/twitter.png" title="Twitter" class="ssba" alt="Tweet about this on Twitter" /></a>
 <a class="ssba_google_share" href="https://plus.google.com/share?url=http://research2.miltonbayer.net/executive-search/" target="_blank"><img src="http://research2.miltonbayer.net/wp-content/plugins/simple-share-buttons-adder/buttons/simple/google.png" title="Google+" class="ssba" alt="Share on Google+"/></a>
 <a class="ssba_linkedin_share ssba_share_link" href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://research2.miltonbayer.net/executive-search/" target="_blank"><img src="http://research2.miltonbayer.net/wp-content/plugins/simple-share-buttons-adder/buttons/simple/linkedin.png" title="LinkedIn" class="ssba" alt="Share on LinkedIn"/></a>
 <a class="ssba_email_share" href="mailto:?subject=Executive Search&amp;body=%20http://research2.miltonbayer.net/executive-search/"><img src="http://research2.miltonbayer.net/wp-content/plugins/simple-share-buttons-adder/buttons/simple/email.png" title="Email" class="ssba" alt="Email this to someone"/></a>

    </div>
</div>

JavaScript

/* Can't use before() to add text as it then won't be clickable */

$(document).ready(function () {
       
    $('div.ssba').width(0);
    $('img.ssba').width(0);
    
    var clicked=false;
    
    $('div.ssba').click(function(){
        
        if(!clicked){            
            
            $('div.ssba').animate({
                width:360
            },350); 
            $('img.ssba').animate({
                width:36,
                opacity:100
            },350); 
            
            clicked=true;
            
        } else {
            
            $('div.ssba').animate({
                width:0
             },350); 
            $('img.ssba').animate({
                width:0,
                opacity:0
            },350);
            
            clicked=false;
            
        }
    });

});