JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<div id="clickme">
				  Partilhar
				</div>
				<div id="share-stuff"> <!-- social share buttons -->
					<ul class="crafty-social-buttons-list">
						<li><a class="crafty-social-button csb-facebook" href="http://www.facebook.com/sharer/sharer.php?u=<?php the_permalink() ?>" target="_blank"><img title="Facebook" alt="Facebook" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/facebook.png"></a></li>
						<li><a class="crafty-social-button csb-google" href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank"><img title="Google" alt="Google" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/google.png"></a></li>
						<li><a class="crafty-social-button csb-twitter" href="http://twitter.com/share?url=<?php the_permalink() ?>" target="_blank"><img title="Twitter" alt="Twitter" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/twitter.png"></a></li>
						<li><a class="crafty-social-button csb-reddit" href="http://reddit.com/submit?url=<?php the_permalink() ?>" target="_blank"><img title="Reddit" alt="Reddit" width="38" height="38" src="../tv/wp-content/themes/trademark/share-buttons/reddit.png"></a></li>
					</ul>
				</div>
                            
                            <script src="//code.jquery.com/jquery-1.10.2.js"></script>

CSS

#share-stuff li{display: inline;
list-style-type: none;
padding-right: 20px;}

JavaScript

$( "#share-stuff" ).hide();
$( "#clickme" ).click(function() {
  $( "#share-stuff" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});